CODEWITHSUNDEEP
htmlresponsive-images
mpen
mpen

Reputation: 282805

Why does Chrome constantly request new images when using <img srcset>`

jsbin

img {
  width: 100%;
}
<img srcset="http://lorempixel.com/400/200 400w,
               http://lorempixel.com/300/200 300w,
               http://lorempixel.com/200/200 200w">

Try resizing that JS bin in Chrome ~61. The image keeps changing, even above the 400px mark.

Firefox OTOH is more logical -- it breaks at 300px and 200px, just like I'd expect.

400px wide is the widest picture in my srcset, so why is Chrome re-fetching new images even though the parameters haven't changed?

Upvotes: 0

Views: 554

Answers (2)

Yoav Weiss
Yoav Weiss

Reputation: 2270

I believe the issue here is a result of the images in your example having a Cache-Control: no-store directive, which makes them bypass the browser's memory cache. It's not clear to me what the specified behavior here should be, but the best way to avoid the issue would be to avoid sending your images with a no-store directive. Assuming they do not contain any privacy sensitive information (e.g. banking details), there's no reason for them to be no-store.

Upvotes: 1

Nicolas Hoizey
Nicolas Hoizey

Reputation: 2031

First, there are a few issues in your code:

  • it lacks the src attribute, which is mandatory per specification, even if browsers deal with it when it's missing.
  • it lacks the sizes attribute, which is now mandatory when you use the w descriptor in srcset, even if browsers deal with it when it's missing, making it 100vw.
  • the images you list in srcset should have the same aspect ratio. If you want to use different aspect ratios, that's Art Direction, and you need to use <picture>.

However, these issues might not be the cause of your trouble.

It looks indeed like Chrome has an issue, trying to find a new image repeatedly when increasing the viewport width, while the HTML tells it the 400w source in srcset is the largest one.

Upvotes: 2

Related Questions