{% load wagtailimages_tags %} {% load wagtail_srcset_tags %} wagtail-srcset test page

Difference between native wagtail and wagtail_srcset image tag

Both images have a width of 600px browser pixels. But 1px on a legacy device and 1px on a modern high pixel density device are not the same. Phones, tablets or modern computer displays often use up to 3 hardware pixels to show 1 browser pixel.

This is the original wagtail image created with {% verbatim image_tag %} {% image img width-600 %} {% endverbatim image_tag %}. It looks blurry because the original image is at first scaled to 600px width by wagtail and stored in a image rendition. Then this 600px image is shown on a high pixel densitiy screen. Since those screens use more hardware pixels to display those 600 browser pixels, the image is upscaled implicitly by a factor of 2 to 3. Ouch.

{% image img width-600 %}

This is the image generated by {% verbatim image_tag %} {% srcset_image img width-600 %} {% endverbatim image_tag %} which should be sharper on modern display devices, because now 1 browser image pixel should roughly map to one pixel on the device again. We present the browser with different image size alternatives and the browser chooses the most appropriate size for it's devices pixel densitiy which could mean that a 1800px width image is displayed for a 600 browser pixel width image.

{% srcset_image img width-600 %}