3

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?

low_rents
  • 4,481
  • 3
  • 27
  • 55
  • 1
    You should probably use `img` tags (instead of `source`) which supports the [`srcset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) attribute. See MDN link here for examples showcasing pixel density – vsync Feb 08 '22 at 11:04
  • @vsync I know but how can I combine both indicators (viewport width and resolution multiplicator) with image tags? couldn't find any example for this either. – low_rents Feb 08 '22 at 11:07
  • 1
    I think the browser automatically will match the best one out of the `srcset` options, taking into account pixel density – vsync Feb 08 '22 at 11:09
  • 7 years ago I knew everything about these things, but sadly I haven't been working on any project which uses images since then so I've forgotten almost everything... so sad how knowledge dissipates – vsync Feb 08 '22 at 11:11
  • @vsync thank you. yes, I also have read somewhere that the browser takes the best fitting image. But I don't know exactly how this works and couldn't find a description for this anywhere. so when I add a `media="(min-width: 2400px"` source to my `picture` - it should take this image src for a 2x display? – low_rents Feb 08 '22 at 11:14

0 Answers0