4

I have written a JavaScript filler to implement srcset, but I need to clarify the specified behaviour.

While srcset allows you to specify conditions for width or resolution, I can’t work out whether it is OK to specify both. For example:

<img src="images/oh1x408.jpg"
    srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,
    images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w">

This is supposed to cover single and double resolutions, and smaller and wider screens.

I have seen no examples where both the width and resolution are specified. The question is:

  • Is the last image in the srcset example above within specs?
  • Is anything else in the example incorrect?

Thanks

Manngo
  • 14,066
  • 10
  • 88
  • 110
  • possible duplicate of [HTML5 srcset: Mixing x and w syntax](http://stackoverflow.com/questions/26928828/html5-srcset-mixing-x-and-w-syntax) – alexander farkas Jul 17 '15 at 18:46

2 Answers2

6

No, you can only specify one of both. It seems, that you don't understand how the width descriptor works. As soon as you use the width descriptor, you won't need the x descriptor anymore.

Here is a example:

<img srcset="img-300.jpg 1x, img-600.jpg 2x" />

The above example can be also described with the width descriptor, it would look something like this:

<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" />

srcset is all about resolution switching (no art direction). While the density descriptor can only handle static width images, the width descriptor can also handle adaptive images using the sizes attribute. The width descriptor describes the width of each image candidate in physical pixels, the sizes attribute describes the (different) width(s) of the image in layout pixels.

Here is a more complicated example:

<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" />

The example above says we have 3 candidates one with a width of 300, another with 480 and last with a width of 720 pixels, additionally the image is displayed at 400 pixels if the viewport is min-width: 480px otherwise it is displayed at the full viewport width (100vw).

The browser then automatically calculates the width according to your sizes attribute. For example, if you are looking with a 360px wide device the sizes 100vw is taken (because it is lower 480px) and computed to 360px layout pixel. Then the browser calculates the density of each candidate by division: width descriptor / calculated size):

300 / 360 = 0.83
480 / 360 = 1.34
720 / 360 = 2

And then the browser chooses the best candidate for the device depending on the pixel ratio of your device. So it takes the 480 wide image on a 1x device and the 720 wide image on a 2x device.

And as you see, you don't need to use density descriptor anymore. The density descriptor is simply a shorter version.

And yeah, there is already a polyfill handling this just fine.

alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • Thanks for the explanation of how the `sizes` attribute works. This would suggest that it is actually _better_ this way than trying to do it yourself with a combined `w` and `x` value. – Manngo Jul 29 '15 at 02:48
1

No, both is not allowed. The srcset spec says that the attribute is made up of image candidate strings, separated by commas, and that each such string has

  1. Zero or one of the following:

    A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a U+0077 LATIN SMALL LETTER W character.

    A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a U+0078 LATIN SMALL LETTER X character

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Yes, I saw that, but was hoping, as it is a draft document, that there might be a more definitive document available which permits both width and density. Otherwise it seems to be an unhelpful restriction. I have submitted a comment to that effect on the mailing list. – Manngo Jul 17 '15 at 03:45
  • The undated deveioper version of the WHATWG standard seems to have different rules, including allowing both, but it doesn't match with its full spec, and instead matches with the W3C's HTML 5.1 spec. I have no idea what that means, save to say that the WHATWG spec is even more vulnerable to change. – Alohci Jul 17 '15 at 19:38
  • @Alohci: No the WHATWG standard does not allow both. There was an older draft, but this is gone. Here is the current WHATWG version: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset and here you find the actual repo of the spec: https://github.com/ResponsiveImagesCG/picture-element (also see my answer above) – alexander farkas Jul 20 '15 at 21:34
  • @alexanderfarkas - Ah excellent. I could not find that up-to-date version. https://whatwg.org/ does not link to that version. I note that https://html.spec.whatwg.org/multipage/index.html links to a developer version of the spec that still allows width, height and pixel density. It's all a bit of a mess really. – Alohci Jul 20 '15 at 23:42