[FEATURE] 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

[HEIGE-PCloud]

WebP is supported on almost all modern browsers, AVIF is not supported on Safari and JXL is not supported on almost any browsers. It does not make much sense to use a "fallback" strategy in this situation. I suggest only using the WebP format for better image performance.

Instead of creating a custom pipeline, I think it might be possible to use some API service (either self-host or online-provider) which can convert images to WebP format. The resources.GetRemote can be used to call the API and insert the converted image on the fly.

Reference: https://caniuse.com/webp https://caniuse.com/avif https://caniuse.com/jpegxl https://gohugo.io/templates/data-templates/#get-remote-data

[HEIGE-PCloud]

https://gohugo.io/content-management/image-processing/#target-format

Well it turns out Hugo can do the conversion directly!

[LITUATUI]

Hi, thanks for the reply.

I used WebP for many years in my WordPress blog because of the hype made by Google. However, it's not a good image format. It's based on the old VP8 codec, while AVIF is based on VP10/AV1.

In most cases WebP is even worse than JPG when MozJPEG encoder is used. You can see the tests on the link below.

https://siipo.la/blog/is-webp-really-better-than-jpeg

JXL has poor support, but AVIF is supported by most browsers. AVIF has better compression, so it's better suited to websites, while JXL will be for high quality photography.

---

Hugo doesn't convert images to AVIF, that's why the Clarity and HBS themes adopted this solution.

https://github.com/razonyang/hugo-theme-bootstrap/issues/470

[GitHubd3b7c]

WebP is supported on almost all modern browsers, AVIF is not supported on Safari and JXL is not supported on almost any browsers. It does not make much sense to use a "fallback" strategy in this situation. I suggest only using the WebP format for better image performance.

Instead of creating a custom pipeline, I think it might be possible to use some API service (either self-host or online-provider) which can convert images to WebP format. The resources.GetRemote can be used to call the API and insert the converted image on the fly.

Reference: https://caniuse.com/webp https://caniuse.com/avif https://caniuse.com/jpegxl https://gohugo.io/templates/data-templates/#get-remote-data

BTW IOS16 supports avif in Safari.