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.

1. Example image
2. Encoding AVIF images
   1. Squoosh
   2. Squoosh CLI
   3. ImageMagick
3. Progressive enhancement
4. Debugging the picture element

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:

Format	File size	Smaller than JPEG
JPEG	30 kB	-
WebP	15 kB	50%
AVIF	11 kB	63%

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 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.

Debugging the picture element

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

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;

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

Firefox might provide something similar in the future.

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

from Hacker News https://ift.tt/3xdKDZD