'Responsive images: Combining different sizes with different resolutions

There are similar questions here but I didn't find a satisfying answer for myself. I want to combine the ability to display responsive images by viewport width and by resolution multiplicators ("x-descriptors").

here is my responsive image by viewport width:

<picture>
  <source media="(min-width: 400px)" srcset="small.jpg">
  <source media="(min-width: 800px)" srcset="medium.jpg">
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <img class="w-full" src="very-small.jpg">
</picture>

how can I extend this so that e.g. with a 2x resolution (e.g. retina display) I am able to display the large-2x.jpg, medium-2x.jpg and so on?

htmlimageresponsiveresponsive-imagesresponsiveness


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions