17

I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91

Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.

Testing jsbin: http://jsbin.com/hulaconake/1/edit?html,output

Image tag I have:

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/

I'm not having any issues in FF or Safari (both using picturefill).

iOS Chrome has similar problems.

Is my syntax wrong? Is there something going on I don't know about?

Zeb Pykosz
  • 173
  • 1
  • 1
  • 4

1 Answers1

40

It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.

In case you want to use different images or same image with different crops, use the picture element.

Responsive images can be technically differentiated between 2 types.

  • srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
    • density descriptor (x) (for static image sizes, Retina vs. normal resolution)
    • width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
  • and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)

So img[srcset] is for resolution switching and picture is for different images reacting to your design

alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • 4
    Interesting, so how would you test if it's working? Just clear the cache? – Javier Villanueva Feb 01 '15 at 15:46
  • Well described. Very useful information in figuring out the display differences between browsers when using the srcset attribute. Thanks. – ianyoung Feb 19 '15 at 12:22
  • 1
    I was pulling my hair out trying to figure out why even though Chrome reported `devicePixelRatio === 1` it was insisting on loading the 2x image. And wondering how Google searches could turn nothing up -- surely someone else had noticed! Finally came across this -- thanks. Cleared the cache and I see what I should. – tremby Jun 30 '15 at 01:50
  • "So img[srcset] is for resolution switching and picture is for different images reacting to your design" - EPIC. – sidonaldson Aug 25 '15 at 15:35
  • "picture" isn't supported by Safari and iOS, is it a good idea to combine picture with srcset so we can use different proportion depending on the screen ? – Jerem Oct 16 '15 at 13:33
  • 5
    just wanted to add that the "disable cache" option in chrome dev-tools makes no difference here, if there is a higher res version in cache, chrome takes it, no matter if dev-tools is open or not – goleon Apr 05 '16 at 11:07
  • Sounds nice, but doesn't really test out, I'm just now struggling with a case where the picture is not displayed at all because chrome is trying to get the largest (but 404) image in the srcset although the src is readily available. (1x display!) – lucian Sep 18 '16 at 12:59
  • But why it do not work sometime? https://jsfiddle.net/onigetoc/xsLs8y9h/ – Gino Jan 07 '17 at 21:57
  • I found that a good way to get Chrome to retry, without using Incognito, is to make sure you have devtools open, right-click the refresh button, and choose "Empty Cache and Hard Reload". – Sam Rueby Jun 04 '18 at 11:37
  • Only big image in Incognito, Cache reload, DPR1..... Bad feature as I cannot switch to picture which is not supported by IE11 – Fanky Feb 19 '19 at 11:27