Around this time last year I wrote about WebP images, based on VP8 video compression. This post is about a similar kind of new image format called AVIF, based on AV1 video encoding. The modern trend now is that the latest image codecs are based on video codecs.

I’m also writing this because Firefox 86 launches today with (limited) AVIF support turned on by default. 🎉

EDIT: Firefox 86 was released today, but AVIF support was pulled at the last minute. For what it’s worth, the pictures at the bottom of this post didn’t show up in either the last beta (86.0b9) or the latest nightly build (87.0a1). Everything all works fine in Chrome though.

Why use AVIF?

The new format broadly represents a more efficient form of image compression than JPEG. This on its own is a good enough reason to get excited. Still, it’s worth considering what people want out of image compression, and what they mean when they say AVIF is better. You have overall resolution and perceptual quality traded off against file size, and none of these things scale linearly to one another.

As noted by Kornel Lesiński:

It’s surprisingly difficult to fairly and accurately judge which lossy codec is better.

Tolerance of artefacts depends on context and changes with each image. Some people consider film grain to be aesthetically pleasing for example. All of this is to say that automated benchmarks can only tell you so much, the final judgement is all subjective to the individual viewer.

In general, AVIF is 50% more efficient than JPEG, according to multiple benchmarks. See here, here, and here for some practical visual comparisons. Personally, I don’t see a huge difference between WebP and AVIF in these, but maybe that’s the point, if the compression is good, you shouldn’t be able to notice it.

The only thing AVIF consistently messes up are heavily compressed graphs, where thin lines tend to get rubbed out. That’s a unique but very frustrating edge case. You would be better off rendering graphs to SVG.

Otherwise AVIF is more effective in a variety of use cases. You might use JPEG to compress photos with plenty of noisy details, or PNG for cartoons with big blocks of solid colour. AVIF covers everything on that spectrum.

AVIF supports some useful modern features, such as transparency, animation, and 12-bit 10-bit colour for showing off on all the new High Dynamic Range displays. All sorts of things which weren’t considered when the JPEG standard was finalised back in 1992. Also, it’s free, that’s free as in ‘legally clear of prospective patent claims’, at least so far as it hasn’t been tested in court yet.

Why not use AVIF?

The format doesn’t currently support progressive rendering, you can see the differerence that makes here. It’s obviously a problem when loading on a slow connection and it undercuts the speed gains you might make from smaller files.

Encoding and decoding is pretty slow. That has an effect on mobile devices, where sustained processor-intensive decoding will drain your battery. At the moment this represents a trade off between battery life and bandwidth, although I expect it to get better as mobile processors improve.

What I haven’t done is compare AVIF to WebPv2, JPEG-XL, HEIF or FLIF, or whatever else I neglected to name here. Maybe these formats are better, so I’m inclined to check them out if/when they start gaining support in major browsers.

Browser support

AVIF is not currently viewable in Edge or Safari. This is a major hurdle holding back wider adoption. Then again, Safari on MacOS can’t even show HEIF images, the default format used by iPhone cameras, so.

The format has been supported on Windows 10 since May 2019 with this extension installed. It should be supported in the next release of Chrome for Android, as well as native support upcoming with Android 12.

Viewing test

Here is a test for whether you can view AVIF in your browser:

Avif image test

This uses the picture tag with a fallback to PNG. If you want to try a similar thing, the code looks like this:

<picture>
 <source srcset="original.avif" type="image/avif" />
 <img src="fallback.jpg" alt="alt text" />
</picture>

I used avif.io to convert everything in this post; it’s useful enough for something which runs in the browser and just works. If you remember using firefogg to convert Ogg Theora in Firefox, avif.io will be a comfortingly familiar experience.

Exporting to AVIF has been possible with GIMP since version 2.10.22 and with Paint.NET since version 4.2.14. It’s also theoretically possible to convert to AVIF with ImageMagick, although I couldn’t find any documentation on it yet. Lastly, there’s another browser-based image converter called Squoosh developed by Google.

A walk around Leicester in the snow

I’ve been trying to get back into analogue photography. The only film available in Boots at the moment is black and white Ilford stock, so here are some moody monochrome pictures.

Trees in Victoria Park

Shooting on film is obviously a very slow and inconvenient way of taking photos. Alternatively, you can take a photo on your phone and have it posted on Instagram in a matter of seconds, and it would probably look better than what I’ve come up with here.

I’m not into photography as much as the mechanical working of the camera, the technology and the process. That’s why I’m interested in new image formats.

Selfie in the snow

This is one of the units on the Faircham Industrial Estate, the building on the left houses Leicester Hackspace.

Hackspace

A house framed with scaffolding on St. Albans road.

House with scaffolding

The river Soar going by Mill lane and de Montfort University.

de Montfort University

Another selfie.

Selfie in front of a brick wall

An appropriately named religious building, the Chroma Church.

Chroma Church reflection

I sort of took this photo by accident.

Failed photo of bike and handlebars

Grim scenes with these coronavirus alerts in the city centre.

Grim digital billboard on Gallowtree Gate

A temporary cycle path down a small section of Saffron Lane.

Temporary cycle lane down the side of Saffron lane

This is the old Lifeguard knitwear factory. It currently houses a different garment business, but they’ve kept the retro signage.

Lifeguard knitwear factory

Close-up on the sign.

Lifeguard knitwear factory sign

Other typograpical novelties, the lettering on the front of Leicester Central Library.

Leicester municipal library

And finally, the backs of various houses, because I was getting cold and ran out of other things to take photos of.

Houses Houses Houses