Introducing AVIF Support For Peakhour Image Optimisation
Today we're pleased to announce that 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 the support in Chrome is via Chromium, other Chromium browsers like Edge and Opera, are expected to also support AVIF by the end of the year.
AVIF offers a number of 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 joint collaboration between Google, Microsoft, Netflix, Arm, Amazon, Netflix 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, 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 due to its expensive licensing requirements.
The AV1 codec was developed to be open source and royalty free, a solution to 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 very 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 files 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 willing to accept a small loss in image quality then improvements become quite dramatic, we'll look at these results in a separate blog post. If you want to see what difference AVIF will make to your website then try out 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 color 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 fully take advantage of the higher quality displays.
Finally, unlike JPEG, but like WebP, AVIF supports transparency and can be lossy or lossless. It also supports the ability to 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 to make it appear the website is loading faster. This is offset somewhat by the smaller file sizes that AVIF brings, the full images will be downloaded sooner.
Encoding speed is a problem for the server, large images can take a few second on fast CPUs. However, encoders will improve and direct hardware support will grow.
AVIF for Peakhour clients
Peakhour is rolling our AVIF support around the world, for the time being though we will not be supporting animation. Peakhour client's don't have to take any action to start seeing the benefits of AVIF, supported browsers will simply start enjoying the benefits of faster loading pages.
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 Accepts Header, until the AVIF is ready to be served from our cache.
We're really excited about the introduction of AVIF and the pageweight savings it will bring to our clients. Even though internet connections are getting faster transfer size reductions are still as important as ever.