And for example i try to change picture from images/elva-fairy-800w.jpg to images/elva-800w.jpg and it works well in Firefox, but doesn’t work in Chrome (video example).
Sorry for the delay. When I first saw your post I thought: “Oh… This will probably take some time with analyzing the video and testing around.” So I bookmarked your post to not forget about it and coming back later. Now I had enough time to dive into it. Here we go:
Responsive image task
The second <source> can be omitted since the fallback <img> will be used. (I see that the example on the learning page also uses the same format as you did. I will have a look to update it.)
Chrome behavior with switching images
Thanks for the video! I was a bit surprised when I saw you making the viewport bigger and the image didn’t change. I already knew about chrome not loading the smaller image when you make your viewport smaller, but this is different. I tested it with https://mdn.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished/ and for me this was only a problem with the responsive mode of chrome. When I didn’t use the responsive mode and instead changed the size of the browser window (like in your video) it worked. Maybe this is a weird caching issue. Make sure to always first hit CTRL-SHIFT-R to force reload without cache before you resize the window. Let’s see if it still is a problem.
Same size, different resolutions
This has nothing to do with viewport size or image width. It’s about high density screens like in modern mobile phone where one CSS pixel isn’t the same as one device pixel. You can test it in Firefox Responsive mode with the “DPR” setting (top middle). It defaults to “1”, but if you set it to “DPR: 2” you will see the higher resolution image getting loaded.
I recommend this link that @justsomeone posted some time ago which explains this topic: https://elad.medium.com/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b
Thank you very much!
About Chrome behavior. It worked for me when i change and return back some size="" settings. I also assumed it was a cache. Now i try to clear cache in Chrome settings and it working good for one iterance (change viewport from small to large). Than it breaks down again (with and without responsive mode).
Note: If a larger version of an image is available in the browser (HTTP) cache, some browsers might load that image even if it is not the one specified by srcset (because if the browser already has a higher resolution image stored locally, why not use it?). To disable this for the lab, make sure your HTTP cache is disabled in developer tools.
so i guess once it load the higher resolution one it ignore the smaller one
please notice that the browser does not know if the image are same picture but different resolution or different image it just load the file
and i tried to disable the http cache and it work like firefox but sometime it does not. not sure why but you can say it work like about 50 % maybe there issue with http cache option not working as it should be
when you want any browser to respect the size setting use the new picture element
tested with latest version of chrome on rocky linux
forgot to mention when i clear the cache and minmize the window to small size then load the page it work fine but once it max it stop load the small one
Yes, same situation. If i change images/elva-800w.jpg 800w to images/elva-fairy-800w.jpg 800w like this:
<img srcset="images/elva-fairy-320w.jpg 320w,
images/elva-fairy-480w.jpg 480w,
images/elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 320px,
(max-width: 550px) 440px,
800px"
src="images/elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
, minimize the window to small size then load the page it works too. If i reload page in small size it works again (testing without developer mode and clearing cache).
And… it doesnt work with images/elva-800w.jpg 800w from my Github Pages.
Maybe it is something about images sizes. Elva-800w.jpg = 111 kb, elva-fairy-800w.jpg = 125 kb.
I found different between images/elva-800w.jpg 800w and images/elva-fairy-800w.jpg 800w examples.
Working way (before making it wider once):
minimize the window to small size then right click on image and choose view image source then reload page in small size and it works.
for me using your github link or using this last code load the small one but once i max the window it stay use the big one
i just notice this 800w is different than the one in src so not sure chrome make some relation between the image in src and srcset or not
think you need to test it when both src and the last option in the srcset are the same
and when testing do not change many factor like using sometime the 440 and other time the 480 and change the image file
so one change per time or you will get lost easily
Now I had enough time to dive into it. Here we go:
