AVIF Image Format - The Next-Gen Compression Codec

What is AV Image Format (AVIF)

AVIF or AV Image Format is an open and royalty-free image format based on the AV1 codec, and like AV1, AVIF provides a very high compression rate. Being royalty-free makes it one of the best among its peers. Leveraging the powerful genes of AV1 proves beneficial in both processing time and handling hardware issues. AVIF has moved past its early days: it is now a mainstream, widely supported file format with a mature encoding and decoding ecosystem, so it is a safe default for most use cases today.

Developers have been working on developing a better image compression algorithm for some time now. For example, before AVIF, HEIF was invented which was arguably a better technique in its time. You would be knowing about the HEIF images if you are an iPhone user. HEIF uses HEVC codec, and as you may notice in the image below (Model: Samsung Galaxy S10), it will save storage space but it was not popular with some sharing sites.

Arguably, HEIF is said to save 50% of the storage, which is excellent in today’s data-driven world. HEIF and AV1 are both based on the same standard, i.e., ISO-23000-12, which was driven by the Moving Pictures Experts Group (MPEG). Both formats’ pedigree alone marks their reliability and makes them trustworthy with a promising future. Apart from bringing the file size to a minimum, the codecs using this standard can also also be used for animated images or GIFs as popularly known.

Now If you are wondering that if HEIF was more or less the same, then why are we moving towards AV1 – it is mainly because of the royalty-fees and slightly better performance of AV1 compared to HEIF.

Before we dig deep into the AVIF image format and compare it with other compression codecs, it’s of utmost importance that your images are responsive to different resolutions. In this case use LT Browser a dev-friendly browser for mobile view debugging on which you can see the mobile view of your website on Android and iOS resolutions.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Now let’s understand more about the AV1 codec.

Introduction to AV1 Codec

AV1 is the most recent video codec developed by Alliance for Open Media and hence the name AOMedia Video 1 codec (AV1 codec). The development of the AV1 video codec resulted from the collaboration between Google, Xiph, and Cisco, who decided to combine their in-house video codecs into one single open, royalty-free video codec to benefit everyone. Being royalty-free has been the highlighted feature for AV1 since every other codec had a portion of royalties (except WebP). Therefore, unlike JPEG, which was neither open nor royalty-free, AV1 has seen much faster progress and a wider adoption among the top tech companies, including Google.

The idea behind designing AV1 was to transmit the video over the internet. With a greater compression reach for the video and reducing the number of overall bits, AV1 codec provides multiple coding techniques that enable the encoders to use various inputs for their missions. If you wonder why we brought this concept of video compression technique into an image compression post, video, and image codec share similarities between them because of the same nature of the data. AV1 codec has proved very advantageous for the internet by saving the bandwidth, which MPEG could not do, although JPEG XR was still in the race but not as effective as AV1.

When tech companies such as Facebook and other video streaming websites started using AV1, the company decided to bring an image format with the same efficiency and based on the same codec. AV1 codec is the foundation of the AVIF image format that is taking the internet by storm.

How to Create AVIF Files?

There are various image compression tools and encoders to create AVIF files. However, the option is not yet available on popular image editing software like Photoshop. Given below are two ways through which you can create AVIF files:

Squoosh

Squoosh is one of the most popular image compression applications by Google. This allows you to create AVIF files from some of the most popular image formats like JPEG, PNG, etc., on a single click. However, if you want to convert a large set of files, encoders are better at it.

AVIF Encoding and Decoding Mechanism

AVIF is often known to produce high-quality images in a compressed format while compromising little on quality. However, when we talk about encoding, there are three encoders available to create the exact image from the data, i.e., rav1e, SVT-AV1, libaom. Here, the only libaom fulfills all the requirements, where it uses the C API as the encoder library to get back the result.

Once you have encoded, the browser decodes the image for you. Every major browser now decodes AVIF natively, so you only need a JavaScript decoder for older browser versions that predate native support.

You can also use the AOMedia library libavif, an established open-source library to encode and decode images in AVIF image format. This can be done using the command line, and on Mac, you can install it with Homebrew.

AVIF Comparative Analysis

AVIF is a major upgrade over its other competitive image format like WebP, JPEG, PNG, and more. The following section is for demonstration purposes to show the image differences in different codecs.

Note: Since AVIF and WebP formats are not supported on some browsers, we have taken the screenshot and embedded them in the PNG format. However, you can try viewing the actual image by clicking on the link.

Comparing AVIF and JPEG

JPEG or Joint Photographic Experts Group has been ruling the media industry for quite some time. With advancements in digital technology, JPEG has provided better color resolution and 24-bit pixel quality. It can further bring down the RGB picture in a single luminance. However, the challenge with JPEG is that it blurs the sharpness of artifacts during compression.

The need to consider the AVIF Image format above JPEG was because of its high quality compressed image without losing much data and its acceptance by tech giants like Google, Youtube, Amazon, etc.

The following points will make it clear why you should pick AVIF over JPEG:

• JPEG does not have support for animation and transparency
• JPEG support only 8-bit whereas AVIF supports 8, 10, and 12-bit
• AVIF has superior image quality
• AVIF encoding is better with less blocked artifacts

JPEG Image Format

AVIF Image Format

Comparing AVIF and WebP

WebP is one of the most popular image compression formats that is used widely in browsers today. WebP compression was developed by Google taking VP8 video format as the container support. WebP is considered one of the most successful image formats being transferred today (only for the compatible browsers). When the PNG format dominated the image market, WebP provided a 45% reduction in the file size when compressed from PNG. This was a huge success and instantly adopted by Firefox, Opera, GNOME, and many other browsers started incorporating the technique, with Apple adding support for WebP in Safari starting with iOS 14.

Now you must be thinking if WebP is so widely accepted and provides both lossless and lossy compression, what’s the need for AVIF to be made native to these browsers? Well, the following differences would clear that out:

• AVIF provides a smaller sized image compared to WebP.
• WebP works on only 8-bit depth, whereas AVIF supports 8, 10, and 12-bit, which will accept a broader range of images to be compressed.
• WebP supports only 4:2:0 channel, whereas AVIF supports 4:2:0, 4:2:2, and 4:4:4 channels.
• The image quality produced by WebP is lower than AVIF and even JPEG.
• AVIF supports HDR, which produces high luminosity images.

WebP Image Format

AVIF Image Format

Keep yourself updated with: Top 9 Best Practices To Avoid Browser Compatibility Issues.

Compression Affects and Parameters

In the last section, it was evident that compromising the quality was a sure way to manage the size and bandwidth consumption while transferring the data. But talking more in-depth into the compression effects, it is quite important and exciting to know what kind of changes an image shows when processed by the algorithm and ready for the transfer. Ultimately, we cannot dramatically change the data.

Chroma Subsampling

Chroma subsampling, often popularly referred to as color subsampling, is the heart of the invention of compression. All the compression algorithms for the video codes and images still today focus majorly on chroma subsampling.

Chroma subsampling derives from the fact that the human eye is more sensitive to image luminosity than color differences. The slighter differences in the color are not differentiable to humans. If we lower the resolution of an image that would ultimately reduce the color shade a bit and the color quality, the difference will go unnoticed. This is a prevalent phenomenon used in both video compression and image compression codecs. Therefore, whenever we design or talk about a compression codec, the first question is, what are the subsampling ratios it supports?

The most popular file type you must have heard, JPEG uses chroma subsampling to transfer the images by optimizing bandwidth to carefully save the luminosity information rather than the exact color information. Diving into more details of its preservation will deviate us from the topic. Still, it won’t hurt to lay down basic facts to understand chroma subsampling as we will be differentiating these in the next section.

Chroma subsampling is represented in digits in the form X:Y:Z (excluding the alpha channel).

X: horizontal sampling reference (width of the conceptual region). Usually, 4.Y: number of chrominance samples (Cr, Cb) in the first row of X pixels. Z: number of changes of chrominance samples (Cr, Cb) between the first and second row of X pixels.

Note: Z has to be either zero or equal to Y (except in rare irregular cases like 4:4:1 and 4:2:1, which do not follow this convention).

We found the following image on Pinterest, which denotes the chroma subsampling of the images in the same form as we discussed above:

To leverage this information, it is reasonably evident that if we transfer a 4:4:4 sampled image as a 4:2:0 sampled image, we can dodge the human observational powers and, at the same time, save a lot of bandwidth considering millions of pixels get transferred in a single image.

Can you spot the difference between the 4:4:4 image and the 4:2:0 (yes, you can refer to them without the colon) images in the following collage?

We are confident you must have spotted the real differences in the images, but it is just because we have shown you the original image and the compressed one to point out the differences. Although if someone sends you this image over WhatsApp and asks you the color of the image, you both will settle on the same answer and most probably on the same shade as well. And yes, WhatsApp uses the same JPEG compression technique we have been using for so long.

Now that we are familiar with the compression technique let’s spot the difference in images of 4:4:4 and 4:2:0 that we usually prefer while compressing.

• The color transition is not as smooth as it is on the original image.
• The color is not so “smooth,” and the grainy texture is visible on the 4:2:0 images.
• 4:2:0 is a lower down version of the resolution, and the jaggedness is screaming this out of the image.

But as we mentioned, human eyes cannot detect the differences; we do not have a problem. With time, the network waves have transformed into compression algorithms as the colors used in a device has increased, so has its size. With millions of colors used in a single image, even if we compress the image through JPEG, it is still considerably large these days until we provide repeated compression and bring out an image with blurred pixels visible. This brings us to the latest codec available today, which is like a super-infant and growing day by day, showing off its power of compression to more and more companies.