The picture element can be used with the format-<type>
image operation to specify different image formats and let the browser choose the one it prefers. For example:
{% load wagtailimages_tags %}
<picture>
{% image myimage width-1000 format-webp as image_webp %}
<source srcset="{{ image_webp.url }}" type="image/webp">
{% image myimage width-1000 format-png as image_png %}
<source srcset="{{ image_png.url }}" type="image/png">
{% image myimage width-1000 format-png %}
</picture>
By default all bmp
and webp
images are converted to the png
format when no image output format is given.
The default conversion mapping can be changed by setting the WAGTAILIMAGES_FORMAT_CONVERSIONS
to a dictionary which maps the input type to an output type.
For example:
WAGTAILIMAGES_FORMAT_CONVERSIONS = {
'bmp': 'jpeg',
'webp': 'webp',
}
will convert bmp
images to jpeg
and disable the default webp
to png
conversion.