Today we're adding support for the AVIF image format to our automatic image optimisation and image manipulation API. AVIF is currently supported in Chrome Desktop (version 85 and up) and has experimental support in Firefox. Since Chrome support comes via Chromium, other Chromium browsers, including Edge and Opera, are expected to support AVIF by the end of the year.
AVIF has several practical benefits over legacy image formats like JPEG, PNG, and WebP.
- Much smaller file sizes for the same picture and quality.
- HDR and wide colour gamut support.
- Support for transparency (unlike JPEG)
- Support for animation (unlike JPEG)
A Quick Background of AVIF
AVIF is a next generation image format derived from the AV1 video codec developed by the Alliance for Open Media, a collaboration between Google, Microsoft, Netflix, Arm, Amazon and others. It uses the same HEIF container as the HEIC format used on iPhones/iPads and offers similar file sizes. However, Apple's HEIC format is based on a commercial, patented codec, so anyone else wanting to adopt HEIC has to pay costly licensing fees. Another next generation format, JPEG XR, developed as a successor to JPEG, was also never widely adopted because of its expensive licensing requirements.
The AV1 codec was developed to be open source and royalty free, addressing the current maze of patent and licensing issues with existing formats. The companies behind the Alliance for Open Media have guaranteed to defend the format against patent challenges.
How does it compare?
NOTE: If you are interested in a technical in-depth comparison between AVIF, JPEG, and WebP, then check out this post from Netflix.
The two most popular image formats on the web today are JPEG and WebP. JPEG was introduced in 1992 and is still very widely used, despite its age. WebP was introduced by Google around 2010 and has only just gained wide browser support.
The first (and main) advantage of AVIF is that file sizes are much smaller than either JPEG or WebP for the same quality image. In recent testing WebP had a 30% advantage over JPEG while AVIF was 50% smaller than JPEG. Our own testing has shown similar results. If you are willing to accept a small loss in image quality, then the improvements become more substantial; we'll look at these results in a separate blog post. If you want to see what difference AVIF will make to your website, try our pageweight report.
The second advantage of AVIF is wide colour and HDR support. You might have seen Apple and others touting their 'wide colour gamut' and High Dynamic Range (HDR) displays. Colour gamut refers to the number of colours a display can reproduce, while HDR lets a display render extra levels of brightness for each colour, creating more realistic colour transitions and revealing more detail in both shadows and highlights. Both JPEG and WEBP have a maximum of 8-bit colour depth (256 levels per colour), so they can't take advantage of these newer displays, a major reason why Apple moved to HEIC in iOS. AVIF supports 10-bit (1024 levels) and 12-bit (4096 levels) colour depths, which can make full use of these higher-quality displays.
Finally, unlike JPEG, but like WebP, AVIF supports transparency and can be lossy or lossless. It can also store a series of animated frames (like animated GIFs).
Drawbacks
Right now the two issues with AVIF are lack of progressive rendering and the speed of encoding. The lack of progressive rendering means nothing is displayed on screen until the image is fully loaded. JPEGs in comparison can display a low quality approximation very early in the load process, which can make the website appear to load faster. This is offset somewhat by AVIF's smaller file sizes, as the full images will be downloaded sooner.
Encoding speed is a problem for the server; large images can take a few seconds on fast CPUs. However, encoders will improve and direct hardware support will grow.
AVIF for Peakhour clients
Peakhour has rolled out AVIF support around the world. For the time being, though, we will not be supporting animation. Peakhour clients don't have to take any action to start seeing the benefits of AVIF. Supported browsers will simply start loading smaller images.
Due to the time taken to encode AVIFs, especially large ones, Peakhour is taking the encoding out of line, even for image API requests. If the AVIF generation is taking too long we'll return a JPEG or WebP, depending on the browser Accept header, until the AVIF is ready to be served from our cache.
AVIF should reduce pageweight for clients whose visitors use supported browsers. Even though internet connections are getting faster, transfer size reductions are still as important as ever.
