CODEWITHSUNDEEP
htmlperformancegoogle-chromesrcsetresponsive-images
Stephan Max
Stephan Max

Reputation: 147

Why is srcset downloading two images?

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="[email protected]" srcset="
    img/[email protected] 320w,
    img/[email protected] 480w,
    img/[email protected] 768w,
    img/[email protected] 1024w,
    img/[email protected] 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!

Upvotes: 3

Views: 2171

Answers (1)

Brad Evans
Brad Evans

Reputation: 728

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.

Upvotes: 4

Related Questions