img srcset and sizes not working properly and impossible to adjust! any ideas?

Question

I have been trying to adjust srcset and sizes for responsive images and load the most appropriate one to avoid loading heavy images when they are not really needed, but I'm facing problems to do this.

1st scenario: Using only srcset attribute:

<img
 srcset="
   /box@2x.png 1400w,
   /box@1x.png 700w
 "
>

The browser should pick the most appropriate image for its render depending on the viewport width/size and DPR. Therefore:

• Viewport width of 1920px and DPR 1 should take the box@1x.png, but instead it is taking box@2x.png
• Viewport width of 580px and DPR 2 should take the box@2x.png, but instead is taking box@1x.png

This doesn't make any sense to me 😕, even if by default when placing srcset the sizes attribute becomes 100vw, it doesn't make sense either, because it means that in a viewport of 580px width DPR 2, the box@1x.png which is 700px is too small to be rendered, therefore the browser should pick the box@2x.png.

2nd scenario: Using srcset and sizes attributes:

<img
 srcset="
   /box@2x.png 1126w,
   /box@1x.png 563w
 "
 sizes="
   (max-width: 36em) 100vw,
   40vw
 "
>

So at sizes attr I'm telling the browser that for viewport width up to 36em (576px) the image will use approximately the 100% of the viewport width. Okay, this is easy, because for mobile devices, the content always spreads from side to side given the small screens, like this:

• Viewport width of 576px and DPR 2 should take the box@2x.png, but instead it is taking box@1x.png < ! Why? 576 * 2 = 1.152, thus the browser should be taking the box@2x.png which has 1126px of width, not the @1x with 563px of width. Does - not - make - sense.

• Viewport width of 1600px and DPR 1 should take the card@1x.png, but instead is taking car@2x.png — Hypothesis: Because I'm telling in sizes attr that for the rest of resolutions the image might be rendered around 40vw but of course if the user has a big screen resolution of 1980px of width, the viewport will be wider, therefore 40vw is a huge piece of pixels, that's why it is taking the @2x version, but how the heck you can use sizes without vw? My containers are fluid, I can't give an exact dimension of width in pixels or ems or anything like that! This is really annoying!

This could be all fixed if I used:

<img
 srcset="
   /box@2x.png 2x, // 1600px
   /box@1x.png 1x // 800px
 "
>

But the problem with this is that for mobile devices with viewport width of 380px and DPR 2, the browser will take the box@2x.png, when actually it is not needed! For this scenario, the box@1x.png perfectly meets the requirements.

I don't know what else to do. Can anyone please give me some piece of advice, help or guidance to manage this situation.

Thank you in advance for your attention and help!

Answer 1

This confused me as well.

I think the problem is that the slot sizes are not measured in the same units as the rest of the dimensions, even when the unit name is the same.

E.g. from your example:

<img
 srcset="
   /box@2x.png 1126w,
   /box@1x.png 563w
 "
 sizes="
   (max-width: 36em) 100vw,
   40vw
 "
>

• The units in the srcset are all what you would expect, i.e. they are viewport units: 1126w, 563w.
• The units in the media condition, 36em, are also what you would expect.
• The slot units are converted to physical units and then used as if they were viewport units, e.g. 100vw and 40vw will be multiplied by the Display Pixel Ratio (DPR).

If you use pixels for the slot size, the same will happen.

For example, the screen that I'm using now appears to have a DPR of ~1.64, so if I have:

<img ... sizes="(max-width: 720px) 400px, 100vw" />

the browser will create a slot of the following sizes for viewports of 600px (or anything below 720px) and 800px respectively:

• viewport=600px: 400*1.64 = 656px
• viewport=800px: 800*1.64 = 1312px

It's quite convoluted but you can confirm this with some practical testing.

Answer 2

Edit: It looks like there is currently a bug in Chrome's device emulation for screen density, which might be the cause of these strange behaviors: https://bugs.chromium.org/p/chromium/issues/detail?id=1294293

1st scenario

• For "viewport width of 1920px and DPR 1" without any sizes attribute means the default 100vw value is used, so the browser is looking for a 1920px wide image: it's normal it takes the /box@2x.png 1400w one.
• But I agree with "viewport width of 580px and DPR 2", it should take the box@2x.png

2nd scenario

• For "viewport width of 576px and DPR 2", I agree it should take box@2x.png. Did you try with a viewport slightly narrower? Are you sure your browser is configured with a 16px root font size?
• For "viewport width of 1600px and DPR 1", the browser is looking for an image with a 640px width, and it might take the 563px one if it considers it to be close enough to not download the larger one which is really a lot heavier. IMHO, your hypothesis is wrong on this case.