A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Allow mixing “w” and “x” descriptors in srcset


Currently, you can’t have both “w” and “x” descriptors in srcset.

The use-case is to optimise images for high-dpi displays. It could be done with client hints but it seems like the adoption of those is not progressing well

There is a way of doing so by leveraging the tag as described here: Halve the size of images by optimising for high density displays - JakeArchibald.com. However, I think it’s more of a workaround given the main use of is art direction.

Example of what it could look like:

            cheetah-400w.jpg 400w 1x,
            cheetah-400w-2x.jpg 400w 2x,
            cheetah-800w.jpg 800w 1x,
            cheetah-800w-2x.jpg 800w 2x,
      sizes="(max-width: 768px) 100vw, 400px"

I think the implementation doesn’t need to be overcomplicated and can pick the right width first and if there are multiple “x” options then pick the one closest to screen DPI.