AVIF: A New Image Format

It doesn’t happen every day that a new image format comes along. So it’s not surprising that people are excited that Chrome 85 has been released with support for the new AVIF format. AVIF (AV1 Image File Format) is an open image format based on the AV1 video format that was developed as a modern alternative to JPEG. And it is indeed impressive: The compression is far superior, so you end up with files that are about 50 % smaller than JPEGs and AVIF even significantly outperforms WebP. Great news for web performance!

But that’s not all. AVIF also supports alpha transparency, lossless or lossy compression, a color depth of up to 12 bit, high dynamic range (HDR), any color space, like ICC profiles and wide color gamut, and image sequences like in animated GIFs.

If you want to learn more about how good AVIF performs compared to JPEG and WebP, Jake Archibald has written an excellent article in which he takes a closer look at different use cases. And there is an equally interesting post on the Netflix Technology Blog. Overall, the results are stunning.

Here’s a quick comparison between JPG and AVIF at the same file size:

JPG image of a US Postal Service truck

JPEG @ 57KB

AVIF image of a US Postal Service truck

AVIF @ 57KB

Using AVIF Today

To make use of the many advantages of AVIF, you don’t have to wait until all browsers support it. By using the picture element, you can use AVIF and provide other image formats as a fallback:

<picture>  
  <source srcset="usps.avif" type="image/avif">
  <source srcset="usps.webp" type="image/webp">  
  <img alt="We Deliver For You" src="usps.jpg">
</picture>

That being said, Firefox already supports AVIF behind a flag (media.av1.enabled) and the outlook for Safari seems to be positive because Apple was also involved in the development of the AV1 video codec as a founding member of the Alliance for Open Media. There is also a polyfill for AVIF that uses a service worker to detect all fetch requests for AVIF files and decode them on the fly.

How to Make AVIF Files

So how do you create AVIF files? Image editing software like Photoshop doesn’t support it yet, so we have to rely on conversion tools or use encoders to create our AVIF files.

Squoosh

Squoosh, an image compression web app by Google, now supports AVIF and you can drag and drop PNGs or JPGs into the UI and adjust the settings accordingly. This is great if you just want to explore the new image format or want to carefully optimize only a few images. Manually converting images doesn’t scale that well, though. If you want to convert a larger number of files at once, encoders are a better, and faster choice. At least if the command line is your friend.

libavif

Libavif is the official library to encode and decode AVIF. If you are on a Mac, you can install it with Homebrew:

brew install joedrago/repo/avifenc

The command to convert JPGs or PNGs to AVIF is straightforward:

avifenc [options] input.[jpg|jpeg|png|y4m] output.avif

If you want an overview of the syntax and available options, use avifenc --help.

cavif

Another encoder is cavif, written in pure Rust by Kornel Lesiński, who is also responsible for ImageOptim. You can build it from source or download the latest version and install it. If you are using a Mac, you can symlink the binary into usr/local/bin and then start converting images by running:

cavif image.png

Or, if you also want to adjust the quality:

cavif --quality 60 image.png

Cloudflare Workers

As Chris Coyier reports, Codepen now also supports AVIF. Image files that are stored in Codepen’s Assets Hosting go through a Cloudflare Worker that does all the conversions and now also generates AVIF. So if your site uses Cloudflare, this might be an interesting option, too. And I guess other CDNs and conversion services will follow, soon.

The Next Big (Small) Thing

Overall, AVIF is a compelling package: Powerful compression at decent image quality, support for HDR and wide color gamut, as well as transparency. And all that in an open format that is backed by industry giants like Google, Netflix, Apple, Amazon, or Microsoft. Why should you care about AVIF? Because AVIF could well become the most popular image format on the Web.

-

This is the 58th post of my 100 days of writing series. You can find a list of all posts here.

~

9 Webmentions

Photo of Sara Soueidan
Sara Soueidan
⁦;💯; @m_ott⁩; shares a great overview of the new AVIF image format, recen article references for further details, and practical tips and tooling to start using it *today*: matthiasott.com/notes/avif-a-n…
Photo of Surma
Surma
@m_ott Thanks for blogging about Squoosh in matthiasott.com/notes/avif-a-n… Just wondering how you ended up calling it “Swoosh”? :D Would you mind fixing that?

Likes

Reposts