Deploying AVIF for more responsive websites

2023-05-24T00:00:00Z

AVIF is a new image format that is quickly gaining popularity on the web because of its high compression rates, efficient performance, and broad adoption. AVIF is an open, royalty-free image format that is based on the AV1 video codec standardized by the Alliance for Open Media. This blog post will provide an overview of how AVIF is adopted in the ecosystem, and what kind of performance and quality benefits developers can expect from AVIF for still images and animations.

What’s new with the AVIF ecosystem? #

Since the introduction of AVIF in Chrome, Firefox and Safari, usage of AVIF on the web has been growing steadily; almost all browsers support AVIF today.

In Chrome alone, AVIF usage grew to approximately one percent in a little over a year after Chrome added AVIF support in stable.

A number of image CDNs, such as Akamai, Cloudflare, Cloudinary and Imgix are serving AVIF images today. In a blog post announcing AVIF support, Imgix reported 60% file size savings compared to JPEG and 35% savings compared to WebP. These file size savings lead to significant storage savings, but also help pages load faster, yielding faster Largest Contentful Paint (LCP) times. LCP is one of the Core Web Vitals, and represents how quickly the largest block of content on the page has loaded. Using modern codecs to compress images is one of the key techniques to reduce LCP. Lighthouse is a great Chrome developer tool for testing your web site and to see how much savings AVIF would bring.

WordPress is the most popular website platform in the world, and there are number of plugins available for developers to convert their images to AVIF, such as:

For more hands-on developers, tools like ImageMagick and FFmpeg are a good starting point.

AVIF encode speed #

Fast encoding speed and high visual quality are critical for deploying image compression at scale. AVIF software encoding speed has improved significantly over the past two years. Compared to other modern still image formats, AVIF produces smaller files with similar visual quality (see the following graph, lower is better) but is also faster to encode.

The chart below (higher is better) illustrates how AVIF encoding speed compares to other image formats. Previous generation codecs like WebP benefit from the less complex (but also less efficient) compression algorithms. With a multi-threaded encoding scheme, AVIF achieves similar performance for common use cases while delivering significant compression gains.

For developers interested in more detailed encoding speed and visual quality comparisons, the Image Coding Comparisons site contains reproducible benchmark results.

While software implementations for modern image codecs like AVIF and WebP are optimized for x86 and ARM processors architectures, compressing vast amounts of images at scale can be computationally expensive. One alternative to reduce compression costs is to explore hardware acceleration. Bluedot has developed a hardware accelerated Pulsar-AVIF encoder running on programmable FPGAs, such as AMD's Alveo U250. Compared to software based avifenc, Pulsar-AVIF delivers a 7 to 23 times speed improvement with similar compression efficiency.

AVIF encode speed comparison

Test set: Kodak (24 images of 768x512)

Encoding 24 images simultaneously (24 processes)

Each software encoding process is executed with 4 threads. (-j 4)
Encoder	Encode time (ms)	Frames per second	CPU utilization	Hardware specification
Pulsar-AVIF (FPGA)	60	409.85	305%	AMD Alveo U250 1ea + Intel(R) Xeon(R) Platinum 8171 CPU at 2.6GHz, 10 cores
avifenc (libaom)	405	59.26	3200%	Intel(R) Xeon(R) Platinum 8370C CPU at 2.8GHz, 32 cores
avifenc (SVT-AV1)	1325	18.11	3200%	Intel(R) Xeon(R) Platinum 8370C CPU at 2.8GHz, 32 cores

Developers can deploy Pulsar-AVIF encoder with cloud virtual machines, such as Azure NP-Series.

AVIF features for responsive web pages #

AVIF has a few interesting features that will help to deliver more responsive web pages. This time we’ll dive a bit into animated AVIFs, which are by far the most efficient way of delivering cool animations on the web.

Animated AVIF #

Animated GIF is still a popular format for animated images, despite being 35 years old. Biggest drawbacks of animated GIFs are the support for 256 colors only and poor compression leading to very large file sizes while also limiting the resolution or frame rate for practical use cases. In contrast, animated AVIF coding is actually the same as AV1 video coding scheme which provides significant file size savings compared to animated GIF.

We ran a simple benchmark where we encoded a set of animated GIFs to both AVIF and JPEG XL. Over the test set, median file size savings percentage was approximately 86% compared to original GIF files and about 73% compared to animated JPEG XL files*.

* libavif and libjxl versions: libavif version 4cff6a3 (libaom version v3.5.0), libjxl version 176b1c03. Test set: 15 sample GIFs from Wikipedia.

Chrome, Firefox and Safari all support animated AVIF playbacks.

FFmpeg is one tool to use for creating animated AVIF files, here’s a basic example of converting a GIF to AVIF using FFmpeg:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF is the desired output quality on a scale of 0 to 63. Lower values mean better quality and greater file size. 0 uses lossless compression. Start with a value of 23 for small animated AVIF files.

FFmpeg uses libaom by default for encoding AVIF images, but it can also use rav1e or SVT-AV1 when available. More information about encoder choices, tuning the encoding parameters for speed/quality trade-offs can be found in FFmpeg's AV1 encoding guide.

Another use case is to repackage an AV1 video into AVIF without re-encoding the original file. This is significantly cheaper than decoding/encoding the original AV1 file and makes the AV1 video available for use with the <img> element. Passing -c:v copy to FFmpeg can do this.

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

Conclusions #

AVIF use on the web has been steadily increasing since launch and is widely supported by browsers, image CDNs, WordPress plugins and encoding tools. All in all, AVIF is a great choice for serving images on the web; AVIF is fast to encode and decode while providing the best quality or smallest file size, whichever you prefer for your website. AVIF is the most efficient way to deliver animations on the web. If you have questions, comments, or feature requests, please reach out on the av1-discuss mailing list, AOM Github community, and AVIF wiki.