1

https://codepen.io/anon/pen/xmJggB

I have this simple codepen, which has an image tag with a srcset of two images, one at 800px and 1000px wide.

Starting at a 401px wide screen, I would expect to see the 1000px wide image, (I'm on 2x retina, if you're not then at the 801px breakpoint.)

Instead it comes in at 448px?

Code:

<img srcset="https://via.placeholder.com/800 800w, https://via.placeholder.com/1000 1000w" sizes="100vw" />
user3521314
  • 464
  • 6
  • 14
  • Not all retina displays have the same pixel density so assuming that the browser will select an image based on a 2x viewport calculation is probably a bit oversimplified. There are also a few other reasons you may get an unexpected result. See [How does the browser pick the right image using “sizes” and “srcset” attributes?](https://stackoverflow.com/questions/52740053/how-does-the-browser-pick-the-right-image-using-img-sizes-and-srcset-attri/52743853#52743853) – benvc Jan 09 '19 at 01:17
  • @benvc window.devicePixelRatio outputs as 2. – user3521314 Jan 09 '19 at 01:21
  • @benvc To follow up, Firefox behaves exactly as I expect, but Chrome does not. – user3521314 Jan 09 '19 at 01:40
  • It could be a caching issue. I have had previous experiences in testing where Chrome downloaded an image and then used the cached image rather than downloading another size (as long as the previously downloaded file was one of the `srcset` options). – benvc Jan 09 '19 at 01:43
  • @benvc Nope, same result in incognito. I believe Chrome is just using, and I'll give them the benefit of the doubt, "different" math to calculate the right asset. – user3521314 Jan 09 '19 at 01:51

0 Answers0