[nuxt3] Support responsive image sizes/srcset for `pixel-device-ratio` > 1 (HD and Retina screens, iPad, ..)

Feature Request

Support (nuxt3) nuxt/image with vercel provider for static app -> nuxt generate.

Example Repo

https://github.com/hartmut-co-uk/nuxt3-image-pixel-device-ratio-2x-support

Context

On ‘normal’ screens, using the viewport width seems sufficient to choose the correct size of the image. But with HD and Retina screens you want to serve bigger sizes of the image. Et voilá, here comes srcset and sizes! With srcset and sizes the browser also takes into account the pixel density of the screen.

To calculate the pixel density of a screen, browsers make use of the pixel-device-ratio. A pixel-device-ratio of 1 means that one device pixel corresponds to one CSS pixel. A pixel-device-ratio of 2 means that two device pixels corresponds to one CSS pixel.

For example, an iPad Air 2 has a screen resolution of 2048 by 1536 pixels (source: Wikipedia). The pixel-device-ratio of this iPad is 2. Which means that for the browser, the screen is 1024 by 768 pixels.

Source: https://medium.com/@woutervanderzee/responsive-images-with-srcset-and-sizes-fc434845e948

Demo

Hosted on vercel: https://nuxt3-image-pixel-device-ratio-2x-support.vercel.app/

PageSpeed Insights

Lighthouse Scan: https://pagespeed.web.dev/report?url=https%3A%2F%2Fnuxt3-image-pixel-device-ratio-2x-support.vercel.app%2F&form_factor=desktop

Conclusion

I’d like nuxt/image to somehow allow srcset to be created which includes pixel-device-ratio 2x (maybe others, too?) such as the manually coded option (4) which includes srcset options for [250w, 500w, 1000w].

This is the only solution which provides both

1. efficiency -> appropriately-sized to save mobile data and improve load time
2. quality -> bigger (sharp) images on HD/Retina/iPad with high screen pixel density

on all devices.

Rendered as

<img
    src="/cat.png"
    alt="(4) Custom responsive plain &lt;img&gt; with pixel-device-ratio=2 support (retina, ipad, ...)"
    class="w-full"
    width="1200"
    height="630"
    srcset="/_vercel/image?url=/cat.png&w=250&q=100 250w, /_vercel/image?url=/cat.png&w=500&q=100 500w, /_vercel/image?url=/cat.png&w=1000&q=100 1000w"
    sizes="(min-width: 640px) 500px, (min-width: 1024px) 1000px, 100vw"/>

⚠️ Note: I’m actually not quite sure if the sizes is correct or if it’s going to be ignored by the browser anyway - cause the browser chooses from srcset for the best choice considering pixel-device-ratio?!? …happy to be put right by someone with more insight!

[hartmut-co-uk]

Astro uses widths in addition to sizes to explicitly define image variants to be provided. I think this would also be a good + straight option?!? ref: https://docs.astro.build/en/guides/integrations-guide/image/#widths

[slavanossar]

Yeah that is fair, would be good to have the option for both, quick and easy global transforms or more granular, separate controls for transforms and display sizes.