This post is part of the series 'Web Performance'. Be sure to check out the rest of the blog posts of the series!
Images represent a large part of the internet traffic. Reducing the size of image files can help to reduce the amount of data that is transferred over the internet, and it may reduce the hosting costs of your website. And for the users, it can help showing images faster.
AV1 Image File Format (AVIF) is a new image format developed by the Alliance for Open Media (AOM). AV1 is currently supported by Chrome, Firefox, Opera, so about 70% of usages. Safari will support it starting with iOS 16 and macOS Ventura. Edge should support AVIF in the future.
As web supports progressive enhancement, you can provide multiple versions of the same image. This means you can provide an AVIF and a PNG/JPG version of the same image to support all browsers. The browser will choose the best image for the user. So, there is no reason to not use AVIF today!
Can I use: AVIF image format
#Encoding images to AVIF
There are multiple tools to encode images to AVIF.
If you have a few images to compress and you want to fine select the best options for each image, you can use the squoosh.app. This tool allows you to tune the compression options and see the result immediately, so you can check if the quality is good.
If you prefer the command line you can use one of the following tools:
squoosh.app CLI
Shell
npx @squoosh/cli --avif auto input.jpg
avifenc
Shell
avifenc --min 0 --max 63 --minalpha 0 --maxalpha 63 --advanced end-usage=q --advanced cq-level=32 --advanced tune=ssim --speed 0 --jobs 1 --ignore-icc "input.jpg" "output.avif"
ffmpeg
ffmpeg -i input.png output.avif
#Adding AVIF to your website
To increase compatibility you should provide multiple formats of the same image. The PNG/JPG is supported by all browsers including older browsers. The AVIF is supported by some recent browsers. If you provide both images, the browser will choose the best one for the user.
The <picture> element allows you to provide multiple sources for the same image.
HTML
<picture>
<source type="image/avif" srcset="image.avif" />
<img src="image.png" width="120" height="90" />
</picture>
You can also support srcset to provide multiple images based on the width or the pixel density of the screen.
HTML
<picture>
<source type="image/avif"
srcset="image200.avif 200w, image400.avif 400w"
sizes="50vw" />
<img src="image.png"
srcset="image200.png 200w, image400.png 400w"
sizes="50vw"
width="120" height="90" />
</picture>
You can validate the image used by the browser by checking the currentSrc property of the img element:
Do you have a question or a suggestion about this post? Contact me!
