HTML5 srcset: Mixing x and w syntax

Question

I'm trying to figure out a way to provide high dpi images to iOS8 clients while also providing responsive image resources for browsers supporting 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 that example in Chrome 38 (OS X, no high dpi) which does support the w syntax in other cases the browser always loads the biggest image (banner-HD.jpeg), regardless of the viewport size. When I add

banner.jpeg 1x

to the srcset Chrome uses that image but still ignores the 100w images.

---

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

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

That seems to work on 2x iOS8 devices, which pick [email protected] because they don't support the w syntax. However Chrome still doesn't seem to care and loads medium.png regardless of the viewport size.

Am I doing something wrong here or is this a known problem in Chrome's implementation of srcset?

Answer 1

1. Don't look what other browser do. Chrome is the only one doing it correctly (and FF 38+).
2. Don't look at this draft. It is not and won't be implemented. Here is the right one: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

Mixing x with w in one descriptor is invalid and the browser will drop those candidates, because a w descriptor is always calculated into a x descriptor:

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

Mixing x with a w descriptor for different candidates is used/parsed by the browser but is invalid and doesn't 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 (i.e. 600 / 300 = 2x): -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" />

This means if you use the w descriptor you automatically also optimize for retina, you don't need to use an additional x descriptor (i.e. 480w 2x = 960w).

Additionally, in most cases of using a w descriptor your default/fallback 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 (dilettantish try to advertise my polyfill)

Answer 2

What you want to do, can be achieved by the picture 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>