HTML srcset Specification: Clarification

Question

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

Answer 1

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.

Answer 2

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

4. 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