CODEWITHSUNDEEP
htmlgoogle-chromeresponsive-designsrcsetresponsive-images
sea_monster
sea_monster

Reputation: 751

Why is srcset causing images to download multiple times?

I have the following image tag using the srcset and sizes attributes to insert a responsive image:

<img srcset="/designed/logo-abihaus-1600x500.png 1600w,
             /designed/logo-abihaus-1200x375.png 1200w,
             /designed/logo-abihaus-960x300.png 960w,
             /designed/logo-abihaus-800x250.png 800w,
             /designed/logo-abihaus-480x150.png 480w"
        src="/designed/logo-abihaus-1600x500.png"
        sizes="100vw" alt="">

From what I understand, I'm just telling the browser all the image sizes I have available and it should download only the most reasonable size based on viewport size, etc. If I resize my browser window (Chrome) to be small and refresh the page, the Network tab is telling me that its downloading both the image I expect (800px, in this case), plus the largest image (I'm assuming from the src attribute).

enter image description here

I've tried this with and without picturefill.js and I'm using Chrome 45 on OS X 10.10.5, so I don't think this is a browser compatibility issue. Is there something wonky with my syntax or am I just misunderstanding srcset?

Upvotes: 4

Views: 4363

Answers (1)

Yoav Weiss
Yoav Weiss

Reputation: 2270

That's a browser bug in the Blink rendering engine.

If you have a <meta name=viewport content="width=device-width"> tag in your HTML, the bug should be fixed in Chrome 46.

If you don't, that's a still open bug, which I hope to resolve soon.

Upvotes: 3

Related Questions