← Home

Wagtail briefly mentions responsive images in their docs using the <picture> tag. This is the approach I am using:

{% image self.image width-900 format-webp-lossless as image_desktop %}
<source media="(min-width:640px)"
            srcset="{{ image_desktop.url }}"
            width="{{ image_desktop.width }}"
            height="{{ image_desktop.height }}">
{% image self.image width-400 format-webp-lossless class="<your classes>" loading="lazy" %}

Note that any CSS classes should be applied to the <img/> tag only.

The explicit width and height need to be set on the <source/> tag only because Wagtail sets them for us on the <img/> tag.

← Home

Erben Systems GmbH

Watterstrasse 81, c/o Sarbach Treuhand AG, 8105 Regensdorf, Switzerland

CHE-174.268.027 MwSt