0

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?

mpen
  • 272,448
  • 266
  • 850
  • 1,236

2 Answers2

2

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.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24
1

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.

Yoav Weiss
  • 2,220
  • 4
  • 17
  • 22
  • 1
    Sure, that would explain why the images change every time a new one is requested, but it still doesn't explain why a new one is being requested in the first place. There's no reason for Chrome to assume the image has changed outside of a breakpoint. – mpen Oct 31 '17 at 16:16