Moving Past JPEG: Exploring the AV1 Image Format AVIF

TL;DR: AVIF is an image format based on the AV1 video codec. AVIF is an extraction from the keyframes of the AV1 codec developed by Alliance for Open Media (AOM). AVIF is compatible with HDR images, and it supports 10- and 12-bit color at full resolution. AVIF offers image compression that is up to ten times higher than popular formats like JPEG. AVIF is an excellent choice because:

  • The AV1 codec standard and AVIF format are royalty-free.
  • AVIF is supported by all Chromium browsers (Chrome 85 on) using content negotiation. 
  • Microsoft Windows 10 supports AVIF from the 19H1 update.
  • AVIF is backed by Google, Amazon, Netflix, Microsoft, Intel, Apple, and more.
  • AVIF offers higher compression efficiency than JPEG.
  • The AVIF image format supports transparency, HDR, wide color gamut, and other modern features.

One could say that the Internet is no longer the information superhighway but rather a sort of Hyperloop for images and videos. According to Cisco, with video occupying as much as 80% or more of all bits traversing the network, it’s clear that there is a need for more efficient compression technologies. The same applies to images and photos. As innovators focused on the AV1 codec standard, we are excited about the potential of AVIF to supplant JPEG as the dominant image format on the web. 

Before we talk about AVIF, let’s take a quick look at some of the standards that are in use today, starting with JPEG. Since its introduction in 1992, JPEG has been the most widely used image compression standard globally. 

JPEG 2000 (or JPEG 2K) is supported in Safari, and it is the oldest of the JPEG successors. JPEG 2000 not only outperforms JPEG, but it can also achieve lossless compression.

The JPEG group developed JPEG XL as an update to JPEG 2000 and a next-generation codec able to achieve much higher compression ratios than the original JPEG standard.

Supported in all browsers, WebP that Google designed beats the eponymous JPEG standard by only a narrow margin. For high-quality, lossy compression, WebP can perform worse than JPEG. 

WebP2 is the next-generation successor to WebP. It is still in a very early form, and it aims to provide a 30% improvement to compression efficiency over WebP. 

HEIC, developed by MPEG, is the image format based on the HEVC standard supported across the Apple macOS and iOS ecosystem. Due to the Apple ecosystem’s power, it’s well known that Apple’s standards tend to drive technology implementations industry-wide. In the case of HEIC however, due to the universal cross-platform sharing of photos, there is still considerable friction with the standard since not all applications and operating systems support HEIC without third-party add-ons or plugins. 

For web images, both AVIF and JPEG XL deliver significantly better results than all existing web codecs, including WebP. According to Cloudinary in their blog post ‘Time for Next-Gen Codecs to Dethrone JPEG,’ AVIF takes the lead in low-fidelity, high-appeal compression. At the same time, JPEG XL excels in medium to high fidelity. 

The advantages of the AVIF standard have been well-publicized, beginning with a Netflix blog in February of 2020 that introduced the format and provided some excellent technical information on the advantages over JPEG. As a founding member of the Alliance for Open Media, Netflix has been a staunch supporter of the AV1 codec standard. Thus, it’s no surprise that they would be interested in using AV1 to improve their UI experience. Netflix is not alone in adopting AV1 and AVIF. Cloudinary’s announcement of their AVIF adoption using Aurora1 reveals that the benefits of a more efficient image codec extend to websites in addition to graphically intensive UI’s. 

The Advantage of AVIF: See for Yourself

(Images courtesy Cloudinary)

The Roots of AVIF

Given the considerable compression gains available with next-generation video codecs, new advanced standards are compelling as image coding formats. Modern video codecs were developed with video as the primary use case. Still, it turns out that the Intraframe coding tools in a video codec are not significantly different from image compression tools. In building a next-generation video codec, it must be able to encode the keyframes with greater efficiency. With an image codec that can outperform the existing standard, it’s not a stretch to break this out as a stand-alone image format. AVIF originated from the AV1 video codec standard developed by the Founding Members of the Alliance for Open Media (AOM). It’s interesting to note that Google leveraged VP8 to create WebP. 

To create AVIF, AOM extended The Moving Picture Experts Group (MPEG) codec-agnostic image container format: ISO/IEC 23000–12 standard (HEIF). HEIF has been used to store HEVC-encoded images (in its HEIC variant) and store AVC-encoded images or JPEG-encoded images. The reason for using the HEIF container is that it features support for any image codec and allows the use of a lossy or a lossless mode for compression, support for varied subsampling, multiple bit-depths, and more. 

The HEIF format also allows the storage of a series of animated frames (offering an efficient and long-awaited alternative to animated GIFs) and specifying an alpha channel (which sees an application in user interfaces). Since the HEIF format borrows learnings from next-generation video compression, it can preserve metadata such as color gamut and high dynamic range (HDR) information. For more detailed information on AVIF with example encoded images, check out the Netflix blog post here.

Balancing Efficiency and Performance

Decoding a full-screen JPEG takes only minimal time. Newer codecs compress much higher, but these file size savings do come at a cost in complexity. As an example, one of the main limiting factors to the adoption of JPEG 2000 was its prohibitive computational complexity. Thus, any new standard must achieve superior compression performance while minimizing the compute cost to reach it. 

For this reason, decode speed is often more critical than encoding speed. Since CPU speed remains broadly consistent even from generation to generation across AMD and Intel processors, the evolution trend is for hardware to include more CPU cores. Older codecs like JPEG designed before multi-core processors became ubiquitous are inherently sequential; that is, multiple cores yield no significant benefit for single-image decoding. In that respect, modern formats such as JPEG 2000, HEIC, JPEG XL, and AVIF are more future-proof and better aligned with the compute architecture in use today.

How to Use AVIF

AVIF is an emerging technology, but most modern browsers support the format, which means you can use it directly in the <img> tag. The best way to implement AVIF in a browser environment is by using content negotiation. In this code example, we use the HTML 5 <picture> and the <source> tags that support content negotiation.

Learn more about how AVIF compares with JPEG and WebP in this excellent blog post published by Cloudinary.

What the Future Holds for Images on the Internet

AV1 is a game-changer for video streaming services and platforms. With the heavy push from Google and the tech ecosystem at large, AV1 and AVIF are well-positioned to dethrone the MPEG H.264 and JPEG video and image codecs.

The newest generation of image codecs, particularly AVIF and JPEG XL, represent a significant improvement over JPEG. JPEG 2000 and WebP also compress more effectively, yet the overall gain is not substantial enough to warrant widespread adoption over AVIF.

For services and platforms that support image coding at a massive scale, a good strategy is to implement several different image encoding approaches to leverage their unique strengths and ensure compatibility regardless of the target device/platform. As you consider what options are right for you, check out the following chart that compares the significant codec standards’ and their key attributes.

Battle-of-the-Codecs AVIF JPEG
(Image courtesy Cloudinary)

Learn about AV1 Screen Content Coding tools

Zoe Liu
Zoe Liu

President & Co-Founder, Visionular

Continue reading...

I need to improve video quality.

Click button to start an evaluation.

Are you ready to start an evaluation so you can upgrade your video quality and UX?