Assessment wanted for Responsive images task

VladimirK · October 27, 2021, 1:03pm

Hi! Need assessment for responsive images task.

I found that the code

				<img srcset="images/elva-fairy-320w.jpg 320w,
				                         images/elva-fairy-480w.jpg 480w,
				                         images/elva-fairy-800w.jpg 800w"
				                  sizes="(max-width: 320px) 280px,
				                         (max-width: 550px) 440px,
				                         800px"
				                         src="images/elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

sometimes dont work in Google Chrome:

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).

One more moment. I dont understand this example:

Because dont see different between large and small viewport. I try to inspect image, but same picture load on large and small viewport:

viewport width = 320px

viewport width = 640px

CSS changes dont make a different too:

mikoMK · October 27, 2021, 11:00am

Hi @VladimirK

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

Have a nice day!
Michael

VladimirK · October 27, 2021, 5:45pm

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).

justsomeone · October 28, 2021, 11:22am

Hello @VladimirK

try to disable all extension then clear all cache again then try again if it work then maybe extension issue

or try to create new profile with no extension and see if it work fine there
maybe issue with the profile it self

hope that help and have a nice day both of you

VladimirK · October 30, 2021, 8:11am

Hello @justsomeone! I tryed your options and tryed to use incognito mode, but saw the same bug in Chrome.

Is it work for you?

justsomeone · October 30, 2021, 10:44am

i need to see the full code and to check how chrome interpret 320w with 280px

could you post it in github or any service

VladimirK · October 30, 2021, 11:03am

Github (example-two.html, example-two.css), Github Pages.

justsomeone · October 30, 2021, 11:41am

Hello @VladimirK

here what i found in google dev https://developers.google.com/web/ilt/pwa/lab-responsive-images#3_using_the_srcset_attribute

there a note

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

justsomeone · October 30, 2021, 11:48am

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

VladimirK · October 30, 2021, 6:39pm

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.

Intresting case. Thanks you for testing

VladimirK · October 30, 2021, 7:01pm

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.

justsomeone · October 30, 2021, 7:53pm

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