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

[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.

Hugo Bootstrap Theme also implemented this neat feature.

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

[colinwilson]

Thanks 👍. I'll look at implementing this soon