How does unlazy handle retina displays?

[felixranesberger]

Hi, I was wondering how unlazy handles the data-sizes="auto" functionality for retina displays?
Should I just provide a 2x variant for the largest (non retina) image variant?
Does unlazy then automatically select the larger retina variant?

<img
        loading="lazy"
        src="data:image/svg+xml, ..."
        data-srcset="
            image-320w.jpg 320w,
            image-640w.jpg 640w,
            image-1280-retina.jpg 1280w
        "
        data-sizes="auto"
>

[johannschopplich]

Hi there!

The data-sizes="auto" feature is generally used to dynamically adjust the sizes attribute of your <img> element based on its display size: it updates the sizes attribute to the offsetWidth of the <img> element.

As for the retina display images, if you want to provide a 2x version for the retina display, you should include that in your data-srcset attribute, and the browser will select the appropriate image based on the device's pixel ratio and the image's declared width.
In your case, it looks like you're providing 3 different image widths (320, 640, and 1280 pixels). If a device with a pixel ratio of 2 was to display the image at a size of 640 pixels wide, it would ideally select the 'image-1280-retina.jpg' (which is essentially a 2x version of a 640px wide image) from the srcset.

The sizes attribute contains the image's width in CSS pixels, not device pixels. Thus, unlazy intrinsically handles retina images (as every browser does).