Around this time last year I wrote about [WebP images](/blog/2020/02/09/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.
Today Firefox 86 launches with AVIF support turned on by default.
### 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](https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary) [excited](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/). Still, it's worth considering what people want out of image compression, and what they mean when they say AVIF is better. It's a triangle, with overall resolution and perceptual similarity traded off against file size, but none of these things scale linearly to one another.
As noted by [Kornel Lesiński](https://blog.cloudflare.com/generate-avif-images-with-image-resizing/):
> 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](https://www.ctrl.blog/entry/webp-avif-comparison.html) [benchmarks](https://calendar.perfplanet.com/2018/is-avif-the-future-of-images-on-the-web/). There are some visual comparisons [here](https://eclipseo.github.io/image-comparison-web/), [here](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4), and [here](https://jakearchibald.com/2020/avif-has-landed/). 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, like transparency, animation, and ~~10-bit~~ 12-bit colour for showing off on all the new [High Dynamic Range displays](https://www.anandtech.com/show/12144/vesa-announces-displayhdr-spec-and-tiers). 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 as without being tested in court.
### Why not use AVIF?
The format doesn't currently support progressive rendering, you can see the differerence that makes [here](https://www.youtube.com/watch?v=UphN1_7nP8U). 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](https://bunny.net/blog/lets-talk-avif-and-why-we-are-not-adding-support-just-yet/) holding back wider adoption. Then again, Safari on MacOS can't even show HEIC images, the default format used by [iPhone cameras](https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/), so.
The format has been supported on Windows 10 since May 2019 with [this extension](https://www.microsoft.com/en-us/p/av1-video-extension-beta/9mvzqvxjbq9v) installed. It should be supported in the next release of [Chrome for Android](https://blog.chromium.org/2021/01/chrome-89-beta-advanced-hardware.html), as well as native support upcoming with [Android 12](https://android-developers.googleblog.com/2021/02/android-12-dp1.html).
### Viewing test
Here is [a test](https://libre-software.net/avif-test/) for whether you can view AVIF in your browser:
This uses the picture tag with a fallback to PNG. If you want to try a similar thing, the code looks like this:
I used [avif.io](https://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](https://archive.flossmanuals.net/open-video-workbook/hands-on-creating-open-video-files-with-firefogg.html) 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](https://www.gimp.org/news/2020/10/07/gimp-2-10-22-released/) and with Paint.NET since [version 4.2.14](https://blog.getpaint.net/2021/01/24/paint-net-4-2-15-is-now-available/). 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](https://squoosh.app/) 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.
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.
This is one of the units on the Faircham Industrial Estate, the building on the left houses Leicester Hackspace.
A house framed with scaffolding on St. Albans road.
The river Soar going by Mill lane and de Montfort University.
An appropriately named religious building, the _Chroma Church_.
I sort of took this photo by accident.
Grim scenes with these coronavirus alerts in the city centre.
A temporary cycle path down a small section of Saffron Lane.
This is the old Lifeguard knitwear factory. It currently houses a different garment business, but they've kept the retro signage.
Close-up on the sign.
Other typograpical novelties, the lettering on the front of Leicester Central Library.
And finally, the backs of various houses, because I was getting cold and ran out of other things to take photos of.
__EDIT:__ After testing with Firefox, these images don't display? The only issue I can think of is that they're transparent. That [shouldn't be a problem](https://chunminchang.github.io/blog/post/firefox-avif-transparency-support)...