Darek Kay's picture Darek Kay

Web developer's guide to AVIF images

AVIF (AV1 Image File Format) is a royalty-free image format that usually performs better than other popular alternatives (JPEG, PNG, WebP). With Chrome 85+ and Firefox 86+ (behind a feature flag) the browser support is getting better, so it is now worth including AVIF images on web pages.

Table of contents:

Example image

In the following, I've encoded the same image using JPEG, WebP and AVIF (if you can't see all three images, your browser might not support a certain format):

JPEG (30 kB)
WebP (15 kB)
AVIF (11 kB)

Although the image quality is subjectively similar, the file size difference is clear:

FormatFile sizeSmaller than JPEG
JPEG30 kB-
WebP15 kB50%
AVIF11 kB63%

A smaller file size means a faster loading time, which improves the overall user experience.

Encoding AVIF images

Let's go through some cross-platform tools for converting images into the AVIF format.

Squoosh

Google's Squoosh web app is a great playground and good enough for handling individual images. You can play around with compression settings and compare the output to other formats.

Squoosh app screenshot

Squoosh CLI

Squoosh is also available as a CLI tool, which is a great alternative for frequent usage and batch processing:

squoosh-cli --avif '{speed: 2}' cow.jpg

In this example, squoosh will create a cow.avif file. As of current version 0.6.3, the output file name cannot be changed.

A low speed parameter will make the conversion much slower, but the file size will be smaller. That's a trade-off I'm happy to make.

ImageMagick

ImageMagick is my usual choice as an all-around image processing CLI tool. Since version 7.0.25, it supports AVIF compression natively. However, apart from quality, I couldn't find any option to set the speed/effort parameter. This means the output is a little bigger than I'd like it to be.

convert -quality 75 cow.jpg cow.avif

Progressive enhancement

As of April 2021, the WebP global usage is ~93% and AVIF is ~63%. Fortunately, there's a backward compatible feature for providing a fallback for unsupported browsers:

<picture>
<source type="image/avif" srcset="cow.avif" />
<source type="image/webp" srcset="cow.webp" />
<img src="cow.jpg" srcset="cow.png" alt="Cow" />
</picture>

In this example, the browser will match the formats from top to bottom and use the first one that it supports. AVIF is listed as the first format, as it provides the best compression.

If the browser doesn't support <picture> at all (I'm looking at you, IE11), all the <source> entries will be ignored and the JPEG <img> picture will be used as fallback. This is a perfect example of progressive enhancement.

Unfortunately, I'm not aware of any CSS alternative for the background property. I've checked image-set() as a potential solution, but browsers don't seem to check the format support of the referenced images.

Debugging the picture element

In Chrome, you can simulate missing WebP and AVIF support:

Chrome rendering tab

But how can you tell, which of the referenced picture images your browser chose to display?

A browser-independent way is to select the img element in the DOM inspector and type the following into the console:

$0.currentSrc;

Viewing active image within a picture element

In Chrome DevTools, this information is also displayed when you hover the src or srcset value of your img element:

Chrome DevTools displaying the image currentSrc value

Firefox might provide something similar in the future.

The screenshots on this page include multiple image types, so try it out yourself. 🔎

Related posts

Want to leave a comment?

Join the discussion at Twitter, Mastodon or Hacker News. Feel free to drop me an email. 💌

Web developer's guide to AVIF images