responsive design - Do latest Chrome / Opera get srcset wrong?

Question

I'm working on a page that has the following markup:

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

and it seems that in the latest Chrome & Opera, they ignore whatever the screen size is and just output whichever file is listed last (so the 1234x400.jpg in my case).

Using Picturefill, Firefox and Safari both show the correct image on smaller screens.

During my testing today I launched Opera which I hadn't opened in a while. When it first launched it was at v25 and it would show the correct image at smaller screen sizes.

Then I noticed that an update had been downloaded, so I ran it, got updated to v27, and then Opera was displaying the same problem as latest Chrome.

So it seems that something has changed in Blink recently.

Can anyone else confirm this or am I just doing it wrong?

Codepen to illustrate what I mean.

Answer 1

You're holding testing it wrong :D

A change that went into Chrome 40 means that when a high density resource is available in the cache (e.g. the largest possible image in your example), this is the resource that would get picked, since there's no point in re-downloading a different, lower-resolution one.

If you really want to test which resource gets download in smaller devices (not that you should rely on which resource gets picked, because srcset is not about that), you can either test on an actual device, or alternatively, open an incognito session, resize the browser (or emulate a device) and only then load the test page.

I've also created a slightly clearer test case out of yours, when you can see which image was loaded.

Also: from your example it looks like you are using images with different proportions inside srcset. That's not something you should use srcset for, but rather use <picture>, that provides guaranties regarding which resource is loaded, so your layout won't break because the wrong image loaded.

When you're using srcset there is no "wrong" image. The browser is free to pick whichever one it sees fit (because its in the cache, connectivity is low, user preferences say so, etc).