Why is srcset causing images to download multiple times?

Question

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).

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?

Answer 1

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.