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:

<img
      src="cheetah.jpg"
      srcset="
            cheetah-400w.jpg 400w 1x,
            cheetah-400w-2x.jpg 400w 2x,
            cheetah-800w.jpg 800w 1x,
            cheetah-800w-2x.jpg 800w 2x,
          "
      alt="Cheetah"
      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.