13

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, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">

That seems to work on 2x iOS8 devices, which pick medium@2x.png 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?

s2b
  • 133
  • 1
  • 5

2 Answers2

21
  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" />
  1. try respimage polyfill (dilettantish try to advertise my polyfill)
Kaspar Etter
  • 3,155
  • 1
  • 14
  • 21
alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • Thank you for that clarification. Suddenly a lot of blog posts I read about the topic make more sense to me, apparently some explained the old and some the new implementation. I already tried your polyfill and liked it very much (especially because of the intelligent image loading). Unfortunately in this case I'm limited by the CMS as well as fixed image width specifications (height and width attributes). – s2b Nov 15 '14 at 00:00
  • Oh, this is to bad. Implementing respimg with sizes is really hard in practice. You might want to check lazysizes width data-sizes="auto". As long as you experiment, you can use the *.dev.js version, which gives you some hints about your markup in the console. Obviously it only does this in ff, ie and safari. In fact there are some bad tutorials out there. Also keep in mind respimage is not only "faster" about 80% of my coding time I spend to fix bugs and improve standard compilance compared to pf. Thx for using ;-) – alexander farkas Nov 15 '14 at 00:26
  • "It is invalid to mix width descriptors and pixel density descriptors in the same srcset attribute." [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img) – B.F. Jun 27 '15 at 10:43
  • What do I do if my 2x mobile image is the same physical size as my 1x desktop image? I cannot define them both in `srcset` using just `w`. – Monstieur Jun 23 '16 at 08:48
  • Kinda late, but just to clarify - when you define `600.jpg 600w` then this image gets automatically served on a 300px display with a 2x retina? Meaning that there wouldn't be need to do that theoretical "`600.jpg 2x 300w`"? – SenTisso Apr 28 '21 at 07:39
8

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>
hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84