Better-than-sRGB displays are here;
color-gamut media queries let us use them responsibly on the web. Like so.
srcset only allows us to describe images with their width, relative to their layout container (using either
x descriptors or
w descriptors +
sizes). As other responsive image variables become important, it makes sense to be able to describe resources with them, too.
h is probably the future-descriptor with the most consensus, but I also remember discussing type-based descriptors at some point, like:
srcset="i.jpg type(image/jpg), i.webp type(image/webp)"
Thinking ahead, at some point, it might make sense to add color-gamut, too:
<img srcset="i-p3.jpg gamut(p3)" src="i-srgb.jpg" alt />
This pattern, compared to the status quo…
<source media="(color-gamut: p3)" srcset="i-p3.jpg" />
<img src="i-srgb.jpg" alt />
…would provide some of the same advantages that
sizes does over
<source media="(min-width)">: less and less-complicated markup (although the combinatorics of, say, just 3 sizes × 2 formats × 2 gamuts = 12 resources for one image, still get a bit dizzying*), and putting control in the hands of the (more context-aware, less error-prone) browser.
*: this is a strong argument for adding a
Gamut (or whatever) hint to Client Hints, too, to take the responsibility for this complexity away from markup / authors, and put it on the server.