AVIF with fallback

Using Themes
1

I only know two themes that do this:

Clarity Theme
Hugo Bootstrap Theme

The Clarity Theme was the first to implement it:

Support for modern image formats

If you are using page bundles (see above) and reference 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 support these formats and the <picture> element will load them, while browsers that do not will fall-back to the default image.

Would it be possible to implement this feature natively on Hugo so that we aren’t limited to a few
themes?

I would like to use AVIF on my websites, but still require the fallback feature since Apple products still don’t support this format.

Thanks!

2

Selecting a pre-existing, alternate image format is accomplished at the theme/template layer—this is not a core feature of Hugo.

If you are interested in the ability to decode/encode images in the AVIF format, see:
https://github.com/gohugoio/hugo/issues/7837#issuecomment-1063793230

1 Like
3

Thanks for answering. I’m just interested in the fallback capability that the two mentioned themes already provide.

I can batch convert all JPG and PNG files in a folder to 10-bit AVIF very easily with ImageMagick. I don’t need Hugo to do it.

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

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

If Hugo can’t have the fallback feature natively, it would be nice to have more themes adopting it. Maybe this topic will bring some attention to theme developers.

AVIF is really great for web images, providing high compression with very little loss. For high quality photography JXL is more adequate.

4

I ended up serving large media assets with Cloudflare Images which will automatically generate the fall back when called. I just hit a stage where the site with photography would get too large no matter what I do. I spent a few weeks tinkering with different solutions. Netlify forced me into large file git that was a pain in the ass.

I too would love future image support, but not at the cost of dependencies and complication with Hugo. Eventually someone will make something native in Go.

Locally, I use ffmpeg to generate an AVIF.