Using `srcset` widths instead of `media`

[mack-ludwin]

Hi, thanks for making this great tool!

I have one issue with it, that made me go back to v2 of next-optimized-images (if someone doesn't know, the canary v3 is using react-optimized-image) and do a lot of work on top of it to get it close to v3, but with one key difference – I need to use srcset widths and sizes instead of media.

The reason is that I would need to setup all the breakpoints for different use cases. For example, I have an image that is:

• 400px wide on desktop (breakpoint 1200, 2 in a row)
• 200px wide on tablet (breakpoint 768, 3 in a row)
• 100% wide on mobile, so it could be anywhere between 300 and 767

Currently I need to set it up this way:

<Img
  src={MyImage}
  sizes={[400, 800, 200, 400]}
  breakpoints={[399, 767, 1199]}
  webp
  densities={[1, 2]}
/>

And it gives me this HTML (paths simplified for readability)

<picture>
  <source type="image/webp" srcset="myimg-400.webp, myimg-800.webp 2x" media="(max-width: 399px)">
  <source type="image/webp" srcset="myimg-800.webp, myimg-1600.webp 2x" media="(min-width: 400px) and (max-width: 767px)">
  <source type="image/webp" srcset="myimg-200.webp, myimg-400.webp 2x" media="(min-width: 768px) and (max-width: 1199px)">
  <source type="image/webp" srcset="myimg-400.webp, myimg-800.webp 2x" media="(min-width: 1200px)">
  <source type="image/jpeg" srcset="myimg-400.jpg, myimg-800.jpg 2x" media="(max-width: 399px)">
  <source type="image/jpeg" srcset="myimg-800.jpg, myimg-1600.jpg 2x" media="(min-width: 400px) and (max-width: 767px)">
  <source type="image/jpeg" srcset="myimg-200.jpg, myimg-400.jpg 2x" media="(min-width: 768px) and (max-width: 1199px)">
  <source type="image/jpeg" srcset="myimg-400.jpg, myimg-800.jpg 2x" media="(min-width: 1200px)">
  <img src="myimg-800.jpg">
</picture>

But what I really need is this:

<picture>
  <source 
    type="image/webp" 
    sizes="(min-width: 1200px) 400px, (min-width: 768px) 200px, 100vw" 
    srcset="myimg-200.webp 200w, myimg-400.webp 400w, myimg-800.webp 800w, myimg-1600.webp 1600w"
  >
  <source 
    type="image/jpeg" 
    sizes="(min-width: 1200px) 400px, (min-width: 768px) 200px, 100vw" 
    srcset="myimg-200.jpg 200w, myimg-400.jpg 400w, myimg-800.jpg 800w, myimg-1600.jpg 1600w"
  >
  <img src="myimg-800.jpg">
</picture>

Then I don't have to figure out exactly what sizes I need for which breakpoints – the browser takes care of that based on sizes (which can be 100vw or even calc(...)), so I can have a fluid design with multiple breakpoints without worrying about which exact size I need for what breakpoint.

I'd love to see this mode implemented in react-optimized-image (and v3 of next-optimized-images). Let me know if you need any more info on this, or if there's a reason you went the media way.

PS: One learns all the time. Even after 10+ years in web development, I always assumed that the browser actually checks the displayed size of an image and downloads the correct one. Ok, might not be possible on page load (would have to wait for css and maybe even js), but surely while lazy loading it has to work, right? Well, nope. That's why sizes is a must, otherwise it would always download the largest, even if you set inline style for width to be 1px... Why do I assume things make sense?! ;)