3

I am working on a major update of my grunt plugin for automated srcset and sizes creation and am confused by Chrome's behavior lately (I am using Chrome Version 46.0.2490.80 m on desktop). I checked Yoav Weiss' demo and noticed that Chrome is downloading two images when I resize the browser width down to 400px—hires and mobile.

Chrome downloading two images

The code used on the demo page looks like this:

<img src="yacht_race@fallback.jpg" srcset="
    img/yacht_race@mobile.jpg 320w,
    img/yacht_race@wide-mobile.jpg 480w,
    img/yacht_race@tablet.jpg 768w,
    img/yacht_race@desktop.jpg 1024w,
    img/yacht_race@hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="A very exciting yacht race.">

The same happens on my personal blog where both the -large and -medium image are getting loaded.

I already had a twitter conversation with Yoav and he was not able to reproduce the scenario. Can anybody else out there reproduce that? Is it a browser bug? Do I have a basic misconception of responsive images in my head? Any advice is appreciated!

Stephan Max
  • 127
  • 10

1 Answers1

4

What's happening here is that you're getting a 304 - it's right there in the image. That means something along the lines of this image is already cached so I'm not going to load it again.

So you're not actually downloading it.

Go ahead and shrink your browser window down real small, and then clear your cache and load the page. You won't see your 'large' images load anymore.

Here's a concise explanation.

Brad Evans
  • 719
  • 2
  • 6
  • 19