2

Example <img srcset> has size points of 300w, 600w, 1200w, 2400w. Mobile (both in devtools and actual chrome on android (moto g3)) ALWAYS use 1200w (even though the mobile window width is considerably smaller and should be using the 600w) -- I am aware of chrome's caching behaviour with larger images and all tests are were done with cache disabled.

Provided example code that displays the broken behaviour of <img srcset> as well as an implementation using <picture> that does EXACTLY what behaviour is expected from srcset.

https://codepen.io/MiDri/pen/OYmReg

<img src='/1x1.gif' srcset='https://dummyimage.com/300x200/0000ff/fff 300w, https://dummyimage.com/600x400/000/fff 600w, https://dummyimage.com/1200x800/ff0000/000 1200w, https://dummyimage.com/2400x1600/00ff00/000 2400w'>

<picture>
    <source srcset='https://dummyimage.com/300x200/0000ff/fff'   media='(max-width:300px)'>
    <source srcset='https://dummyimage.com/600x400/000000/fff'   media='(max-width:600px)'>
    <source srcset='https://dummyimage.com/1200x800/ff0000/000'  media='(max-width:1200px)'>
    <source srcset='https://dummyimage.com/2400x1600/00ff00/000' media='(max-width:2400px)'>
    <img src='/1x1.gif'>
</picture>

Does anyone know WHY srcset is behaving like this?

MiDri
  • 747
  • 3
  • 13
  • It's linked to your browser cache, look at [this answer](https://stackoverflow.com/a/30087595/3930220) – Ugo T. May 16 '19 at 19:07
  • It's not, I specifically mention that in the post -- I figured it out though. – MiDri May 16 '19 at 20:29

1 Answers1

1

Figured it out! It has to do with DPR (Device Pixel Ratio) and how srcset candidate specifiers ignores it... When you use media queries DPR is taken into account, since they're technically part of the css spec.

Example: iPhone6X has a screen resolution of 1920 x 1080, but due to it's DPR of 3.0 presents to CSS (and thus media queries) & JS as 414x736.

That means if a iPhone6X user visits your page in portrait orientation and your srcset images are 300w, 600w, 1200w, 2400w; the browser will choose the 1200w image.

Hope this helps someone.

MiDri
  • 747
  • 3
  • 13