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:

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.

~

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.