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

[McShelby]

I am not sure if I like this kind of magic. It sounds interesting but without seeing an implementation I am hesitant to go in this direction

[doodlebunnyhops]

I've attempted this on my site - which is heavy in images. The concept is you use html picture to list multiple sources with source type for the browser to determine which format is best. I failed because I couldn't find a solid test to force fall back on a given resource but I did succeed in modifying the image short codeto process resources to webp (hard coded) - perhaps if not a fall back option then at least an option for image processing type?

[doodlebunnyhops]

Ah in fact I did keep the (rather messy) work toward fall back in my shortcode saved as dimage.html ... i'd love to contribute but still getting a handle on my hugo shortcode writing.

[McShelby]

The reason why I am hesitant is: the Relearn theme may be used by unexperienced users to write documentation. (At least this is the case inside of my company). It happens regulary, that users insert images inside one page and call them image1.gif and image1.png containing completly different content.

If the discussed mechanism would be activated, the page now would mess up the images.

Additonallly, I feel this is quite a niche feature. It would require to convert the images by using an external tool which usually only very few users attempt to do.

[doodlebunnyhops]

understand the resistance :) I'll see if I can make a modification for others that do find this to be helpful, and even if the work was done in such a way to not impact users unless opted into, it is a rather niche ask and may not be worth the effort.