Add support for modern image formats (AVIF, JXL and WebP)

[LITUATUI]

Support for modern image formats is a great way to improve the speed of a website.

The Hugo Clarity theme has a great way of dealing with new image formats like AVIF, JXL or WebP.

If you reference an image such as sample.jpg in your post, Hugo Clarity will check to see if the same image (based on filename) exists in the modern formats of WebP, AVIF or JXL. If it does, these will be presented to browsers as alternative options. Browsers that can support these formats will load them, while browsers that do not will fall-back to the default image.

This process works for images with the file extensions jpg, jpeg, png, and gif.

Implemented this way would have no disadvantages even for old browsers that don't support modern image formats.

Then we can use ImageMagick to batch convert all JPG and PNG files in our image folder.

magick mogrify -format avif -depth 10 -define heic:speed=2 *.jpg

magick mogrify -format avif -depth 10 -define heic:speed=2 *.png

[icy-comet]

Not to nag, but does this align with your goals for PaperMod @adityatelange?

Adding support for this would simply include tweaking the figure shortcode. Would you be open to accept such a PR?

Here's the support graph for the picture element and here's the one for the figure element. And here's a SO question regarding the use of picture inside figure element.

[mbootsman]

I'm looking for a way to have Hugo generate modern image format of images used in page bundles. I hope this will be included in a next version of PaperMod. Thanks

[istvnurbn]

Please, make it happen.