I put my Mozilla splash page on github.
When I make the browser narrow I can see that the portrait version of the red panda is loading.
However, when I go to Network in Firefox devtools it looks like the 400px wide versions of the four link images are being loaded instead of the 120px versions even when the browser is narrow.
Can someone please explain why I can’t seem to get the <img> srcset and sizes attributes to work?
Okay, it’s my version
I am not an English speaker, but I tried very hard (about an hour with a translator) I hope everything will be clear)
The thing is browser cache.
When you load your page in a large size , browser loads 400px image.
Then you make smaller your browser window , and you expect it load 120px image
But browser is is cheating. It is already downloaded picture 400px and it understands that more economical to smaller it instend of download new more smaller picture to save traffic.
To see how browser loads 120px image, you need to first make smaller the size of browser, and then reload the page.
But it won’t work because you’re not cleared the cache and browser still has your 400px images.
So, you need, make browser smaller first and then reload the page with clearing cache.
This can be done by you click and holding the page reload button and choosing something like hard reload and clear cache
I recorded a short video about how it works on my Google drive, if you want.
https://drive.google.com/file/d/1hQeyddYJsM-sWJTuBCepxUWbBNuRr4qG/view?usp=share_linkThanks for your input @Nosyrev_Nikita. Yes, that’s the behavior in Chrome. In Firefox however when you hard reload your page in a wide window and you narrow your window, the smaller images will get loaded. This works with your code @church_craig on Firefox. So I’m not sure why you don’t see this behavior.
Have a nice day,
Michael
