HTML5 srcset: mixing x and w syntax

Question

I am trying to figure out a way to provide high resolution dpi images for iOS8, and also provide flexible image resources for browsers that support the w syntax. According to the W3C standard, it should be possible to mix both syntaxes in one srcset attribute:

<img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> 

(Source: http://drafts.htmlwg.org/srcset/w3c-srcset/ )

However, when I run this example in Chrome 38 (OS X, without high dpi) that supports the w syntax, in other cases the browser always loads the largest image (banner-HD.jpeg), regardless of the size of the viewport, When I add

 banner.jpeg 1x 

for srcset, Chrome uses this image, but still ignores 100x images.

---

In my case, I would like to specify a smaller version of the image, as well as 2x resources for both:

 <img src="default.png" srcset="small.png 480w, [e-mail] 480w 2x, medium.png 1x, [e-mail] 2x"> 

This is similar to working with 2x iOS8 devices that select [e-mail] because they do not support the w syntax. However, Chrome still doesn't care and loads medium.png regardless of viewport size.

Am I doing something wrong here or is this a known issue in implementing xrcset in Chrome?

Answer 1

• Do not look what another browser does. Chrome is the only one doing it right. (and FF 38 +)
• Do not look at this draft. It is not and will not be implemented. Here is the correct option: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

Mixing x with w in the same descriptor is not valid, and the browser discards these candidates, since the w descriptor is always evaluated to the x descriptor:

 <!-- invalid --> <img srcset="a.jpg 1x 300w, b.jpg 2x 600w" /> 

Mixing x with the descriptor w for different candidates is used / analyzed by the browser, but it is invalid and does not make sense in 99% of all cases:

 <!-- makes no sense: --> <img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" /> <!-- would make sense, because sizes is static in layoutpixel defined (ie: 600 / 300 = 2x): --> <img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" /> 

This means that if you use the w-descriptor w, which you also automatically optimize for the retina, you do not need to use an additional x-descriptor. (i.e.: 480w 2x = 960w)

Aditionaly, in most cases using the w descriptor, your source / backup image should also be defined in srcset:

 <img src="small.png" srcset="small.png 480w, mediumg.png 640w, large.png 960w" sizes="100vw" /> 

3. try respimage polyfill (amateurize trying to advertise my polyfill)

Answer 2

What you want to do can be achieved using the image tag:

 <picture> <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" media="(min-width: 1100px)" /> <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" media="(min-width: 720px)" /> <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" media="(min-width: 450px)" /> <img src="http://placehold.it/500x600/eee/ddd" alt="image with artdirection" /> </picture>