4

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?

sea_monster
  • 659
  • 3
  • 8
  • 18
  • @sea-monster please refer this [link](http://www.smashingmagazine.com/2014/05/picturefill-2-0-responsive-images-and-the-perfect-polyfill/) – Krsna Kishore Oct 05 '15 at 04:22
  • @Webruster, the first example of the linked article [is not valid](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:image-candidate-string-7) : "There must not be an image candidate string for an element that has the same pixel density descriptor value as another image candidate string's pixel density descriptor value for the same element." – Kaiido Oct 05 '15 at 04:29
  • Can't repro on FF, nor on Chrome 45 OsX 10.9 – Kaiido Oct 05 '15 at 04:31
  • yeah i understood that but can you see this point `As you can see, a source tag is in the picture element, along with a normal img tag. Just as we saw with src in srcset, the img is a fallback. In the source tag, we have what looks like a media query, alongside a srcset attribute that contains the same image-source and pixel-density arguments as before. This seems like a nice clean way to popularize responsive images; we’re generally familiar with the syntax, so it should be easily adopted.` .Is this point make any sense to your problem > – Krsna Kishore Oct 05 '15 at 04:35

1 Answers1

2

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.

Yoav Weiss
  • 2,220
  • 4
  • 17
  • 22
  • I already have `` in place, so I guess I'll just need to wait until Chrome 46. – sea_monster Oct 06 '15 at 06:11
  • The waiting shouldn't be too long. According to Chrome's release schedule, I think that Chrome 46 should reach stable in the next week or so (unless there are other major issues with the release) – Yoav Weiss Oct 07 '15 at 07:02
  • Could you please verify that the problem you see is no longer present in Chrome's beta release? – Yoav Weiss Oct 07 '15 at 07:02
  • Yep, looks like only the correct images are downloading now, as expected. Good news! – sea_monster Oct 08 '15 at 22:39