Smaller Images With AVIF for Faster Websites

A few months ago we wrote about using webp in React and its benefits for frontend performance over traditional image formats like jpeg and png. Now there is a new kid in town, AVIF. This image format promises better compression than webP at no loss of quality. We just added AVIF support to our website and saw a big reduction in size. Let’s put it under the microscope.

AVIF is derived from the keyframes of AV1 video, and you can read a whole lot of very useful information about it in the post AVIF has landed by Jake Archibald.

The image we used to test is shown below. A high resolution infographics about our headless eCommerce service. Here’s what the different formats compress to, with reasonable compression settings:

• png: 725kB
• webP: 281kB
• avif: 80kB

Browsers are now starting to support the AVIF format. You can check if your preferred browser already supports AVIF.

The same way as we already automatically convert images uploaded to Crystallize to WebP we are now adding automatic conversion for AVIF images. You can then use the same technique as with loading WebP to tell the browser that you have AVIF images. Then the browser with automatically select the best image type it supports and you have backwards compatibility with older browsers.