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