Images in all of Wagtail’s supported formats

[thibaudcolas]

Currently the bakerydemo only contains JPEGs. I’d like to see at least one example of each format Wagtail supports, to simplify testing things like https://github.com/wagtail/wagtail/pull/10781. For formats that are interchangeable with JPEG we can just change existing images. For formats that aren’t (PNG, GIF, SVG), we’d likely need new visuals, or perhaps new content (all keeping on theme).

As well as making our Wagtail core testing easier, I suspect having mismatched formats will also be a more realistic representation of real-world content.

I don’t think this is a must but we could also include:

• Format conversion in image template tags.
• Examples of using images "lossless". Ideally only in a part of the site where this is indeed appropriate for a site (so not on a decorative image)

[thibaudcolas]

We now have format conversions in #465. And I’ve realised as well as SVG images we’re also lacking preserve-svg usage (wagtail#12285).

[Morsey187]

I've opened a PR for this issue here https://github.com/wagtail/bakerydemo/pull/506, although there are two unresolved problems however.

1. Finding a lightweight and contextually appropriate free to use giff.

Issue described in the current PR here https://github.com/wagtail/bakerydemo/pull/506#discussion_r1760793761

2. Supporting SVGs.

I ran into the issue referenced above (although closed in favor of https://github.com/wagtail/wagtail/issues/11570), when trying to add SVG support, the issue will first need to be resolved in Wagtail before being added to the bakerydemo, without needing to regress current usage of image tags to work around open issues. e.g. not having to convert {% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 preserve-svg to {% picture author.image format-jpeg fill-50x50-c100 preserve-svg

Adding SVG support to bakery, also requires some thought around how to extend/populate the sites data with SVGs whilst staying on theme, I would suggest adding the following SVGs as an ImageBlock on a recipe page and along with a new Author snippet.

• ImageBlock -> https://svgsilh.com/image/1294246.html
• Author -> https://svgsilh.com/image/307076.html

Example