nuxt3-image-pixel-device-ratio-2x-support

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

Context

I'd like to achieve support for browsers with high pixel density of 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.

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

Conclusion: I'd like to be able to get option (4) with <nuxt-img>!!!

Page main section setup

Very basic responsive page, width limited via tailwind with
class="w-full max-w-[250px] lg:max-w-[500px]"

The original image is `/cat.png`, PNG, 1200x630, 994KB.

(1) Plain <img> of full size original image

Fails lighthouse scan, inefficient full file size, looks sharp on all devices

<img src="/cat.png" alt="(1) Plain <img> of full size original image" class="w-full" width="1200" height="630"/>

(2) <nuxt-img> with sizes defined for 1x size

Fine on lighthouse scan and 1x devices, but looks less sharp on retina

<nuxt-img src="/cat.png" alt="(2) <nuxt-img> with sizes defined for 1x size" class="w-full" width="1200" height="630" sizes="sm:250px lg:500px"/>

(3) <nuxt-img> with 2x size

Fails lighthouse scan, inefficient for 1x devices, but looks sharp on retina

<nuxt-img src="/cat.png" alt="(3) <nuxt-img> with 2x size" class="w-full" width="1200" height="630" sizes="sm:500px lg:1000px"/>

(4) Custom responsive plain <img> with pixel-device-ratio=2 support (retina, ipad, ...)

Fine on lighthouse scan, efficient for both 1x and 2x devices, looks sharp on retina

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