Page speed is a big thing. From a search engine optimization perspective and user perspective. And it’s not me who’s saying this, it’s Google, Moz, and SEMrush and every major SEO site out there. Now when we talk about page speed, the biggest challenge for developers is always images. They are the bane of their existence and are usually to blame for slow page load times. That is one of the reasons why every developer is always looking for an image format that can improve their image compression. And AVIF has arrived to do just that.
The AVIF image format can address images compressed with the AV1 (AOMedia Video 1) algorithm. Compared to other compression codecs like JPEG, PNG, WebP, etc., it produces high quality compressed images without compromising much on quality. Developed by the Alliance for Open Media, it is a successor to WebP and promises to be a game-changer in image compression. With major companies supporting this format, the AVIF image format’s future is looking very bright.
Note: It’s exciting to see how AVIF will compare to the upcoming WebP2, the successor of the WebP image format, which is currently in the development phase. WebP2 is expected to address the features that were left out of AVIF.
What Is AV Image Format (AVIF)?
AVIF, or AV Image Format, is an open-source and royalty-free image format based on the AV1 codec, and ,similar to AV1, AVIF provides a very high compression rate. The fact that it’s royalty-free makes it stand out from the competition. Leveraging the power of AV1 has proven beneficial for AVIF, in both processing time and its ability to handle hardware issues.
Before we further discuss the advantages of AVIF, be advised that AVIF saves pictures in AVIF image format, which is relatively new and still not widely adopted. On top of this, it’s using a reasonably new algorithm. So there may be a possibility that it’s not best for all use cases right now.
Developers have been working on developing a better image compression algorithm for some time. For example, before AVIF we had HEIF. You’ll have used HEIF images if you are an iPhone user. HEIF uses the HEVC codec, and, as you can see in the image below (phone model: Samsung Galaxy S10), it saves storage space. It was not popular, however, with some sharing sites.
HEIF is said to save 50% of storage space, which is excellent in today’s data-driven world. HEIF and AV1 are both based on the same standard, ISO-23000-12, which was created by the Moving Pictures Experts Group (MPEG). Both formats have great reliability and a promising future. Apart from bringing file sizes down, the codecs using this standard can also also be used for animated images, i.e. GIFs.
Now, if you are wondering why, if HEIF was more or less the same, we’re moving towards AV1, you’re not alone. The main reasons are the royalty-fees associated with HEIF and the slightly better performance of AV1 compared to HEIF.
Before we dig deep into the AVIF image format and compare it with other compression codecs, 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, hence its name, AOMedia Video 1 codec (AV1 codec). The development of the AV1 video codec resulted from a collaboration between Google, Xiph, and Cisco, who decided to combine their in-house video codecs into one single open, royalty-free video codec. AV1’s royalty-free nature has been heavily highlighted, since every other codec takes a portion of the royalties (except WebP). Therefore, unlike JPEG, which was neither open nor royalty-free, AV1 has seen much faster development and wider adoption among the top tech companies, including Google.
The idea behind designing AV1 was to transmit video over the internet. With a better compression rate for video, AVI reduced the number of overall bits. This allows the AV1 codec to provide multiple coding techniques that gives developers some freedom when writing their code. If you wonder why we brought this concept of video compression technique into an image compression post, its because videos and image codecs share similarities in the nature of their data. The AV1 codec has proved very advantageous for the internet by saving 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 in an image format with the same efficiency and based on the same codec. The 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 tools like Photoshop. Let’s look at two popular apps you can use to create AVIF files.
Squoosh is one of the more popular image compression applications made by Google. It allows you to create AVIF files from some of the most popular image formats like JPEG, PNG, etc., with a single click. However, if you want to convert a large set of files, encoders are better at it.
AVIF Encoding and Decoding Mechanisms
AVIF is known for producing high-quality images in a compressed format while compromising little on quality. However, when we talk about encoding, there are three main encoders available to use with AVIF image data, rav1e, SVT-AV1, and libaom. Of these tree, libaom fulfills most web development requirements, as it uses the C API to tap into the encoder library and display the result.
You can also use AOMedia’s libavif – a new open-source library to encode and decode images in AVIF image format. This can be done using the command line. However, for Mac, you can do it with Homebrew.
Why Is AVIF Better Than Other Compression Codecs?
Some of the features that make AVIF potentially better than its competitors are:
- AVIF supports High Dynamic Range (HDR), which provides better and brighter images.
- AVIF supports both lossless as well as lossy decomposition.
- AVIF includes an alpha channel (referred to as chroma subsampling), providing a richer touch to the images.
- AVIF provides 8-, 10-, and 12-bit color depth.
- AVIF supports 4:2:0, 4:2:2, and 4:4:4 chroma subsampling, and many more.
- AVIF provides the highest compression of any royalty-free program.
Despite these advantages, there is a disadvantage, which is AVIF’s availability in the market. AVIF is a fairly new image format. While it’s gaining a lot of praise, AVIF still lacks browser support. Browsers are the primary medium for most images, hence browser compatibility is crucial.
AVIF’s Current Browser Support
In the image below, we have shown browsers have adopted AVIF:
AVIF’S Use Across Different Browsers
However, the future of the AVIF image format looks very promising, as companies like Netflix, Google, Microsoft, Paint.net, and VLC are already using it. JPEG is still the leading image format used in browsers, but content providers seem happy to start adopting new file formats as well.
AVIF Comparative Analysis
AVIF is a major upgrade over other image formats like WebP, JPEG, and PNG. The following section will discuss the image differences in the different codecs.
Note: Since AVIF and WebP formats are not supported on some browsers, we have taken screenshots and embedded them using 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 also bring down the RGB picture by a single luminance. However, the challenge with JPEG is that it blurs the sharpness of artifacts during compression.
The need to consider using AVIF image format rather than JPEG was because of AVIF’s ability to produce high quality compressed images without losing much data and its acceptance by tech giants like Google.
The following points will make it clear why you should pick AVIF over JPEG:
- JPEG does not have support for animation and transparency.
- JPEG supports only 8-bit whereas AVIF supports 8-, 10-, and 12-bit.
- AVIF has superior image quality.
- AVIF encoding comes with less blocked artifacts.
Comparing AVIF and WebP
WebP is one of the most popular image compression formats in browsers today. WebP compression was developed by Google, using VP8 video format as the container support. When the PNG format dominated the image market, WebP provided a 45% reduction in file size when compressed from PNG. This was a huge success and it was instantly adopted by Firefox, Opera, and GNOME. Many other organizations have since incorporated the technique into their browsers, with Apple being the latest, which will add support for WebP in Safari from iOS 14 onwards.
Now, if WebP is so widely accepted and provides both lossless and lossy compression, why do we need AVIF? Well, the following differences will clear that up:
- AVIF provides a smaller sized image compared to WebP.
- WebP works on only 8-bit depth, whereas AVIF supports 8-, 10-, and 12-bit, so it will accept a broader range of images for compression.
- WebP supports only 4:2:0 channels, 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
Although browsers provide WebP support today, until recently JPEG and HEIF have been the better options because of users’ concerns over image quality.
AVIF is undoubtedly a next-generation image format, offering technically advanced features like high dynamic range and a wide color gamut. Since it’s royalty-free, AVIF is preferred for generating high quality compressed images. However, browser compatibility is still an issue with applications that use AVIF image format. For example, WordPress does not support AVIF directly.
AVIF is supported on Chrome 85 and uses the flag feature on Firefox 80 for compatibility. If an AVIF image is not visible on your Chrome instance, you can try updating your browser to the latest version. For Firefox, you can enable AVIF by trying the following steps:
about:configinto the search bar.
- Search for
- Flip parameter to ‘True.’
Though AVIF is not supported on every browser, you can still use it by tweaking your HTML. The <picture> element has progressive support, which asks the browser to load images in the order they appear in the HTML file. If the browser doesn’t support any format, it will fall back to the default image.
While deploying websites with Netlify, there is a common issue with Firefox not displaying the image. In this scenario, you can try defining custom headers with a Netlify configuration file. Furthermore, set the Content-Disposition to inline vs. attachment to ensure that the browser renders the file internally rather than externally.
Before we discuss the future of AVIF, let’s quickly walk through the importance of video codecs in compression algorithms and discuss parameters like chroma subsampling in compression.
Video Codecs and Their Importance
A video codec is a software or a tool that executes specific compression algorithms on a set of data (such as a video) and produces similar content but in a smaller size (similar content does not mean similar quality). This quality-data tradeoff is often an unpopular one.
If you are raising your bar for quality, the content will have to have a lower data limit. But, compression is typically applied in order to decrease the size of an image. Thus, we cannot compromise on that parameter. The only way to achieve this goal is to compromise on the quality. We call it a lossy compression, whereas an algorithm in which we produce no data loss during compression and decompression is called a lossless compression.
The journey of video codecs begins with H.261, a technique which most people haven’t heard of because of its low efficiency – it’s mostly known as a building block in the compression world. You may, however, have heard of the algorithms that followed in the footsteps of H.261. In 1992, Joint Photographic Experts Group (JPEG) became a standard for compressing images and sending them over-the-wire. Scientists could compress a video’s size using the same algorithm, giving rise to a newer algorithm for compressing videos called Moving Pictures Expert Group, or MPEG. These algorithms are well known due to their file extensions and JPEG was such a hit that it is still a part of most images.
Although we will not cover every codec in this article, the gist of what we tried to convey here is that, firstly, codecs have been with us for a long time and are improving every day; secondly, codecs play an essential part in our daily life, from web surfing to capturing a photo on our phones. The image you see at the top of this page is compressed and then shown by transmission channels with browser support.
Browser compatibility is another thing we need to examine, as different browsers can display a particular image differently. Video codecs and image codecs rely on similar algorithms that only slightly vary from one another. Since the base procedure remains the same, they are often called identical. However, to understand the algorithm’s significant parameters, we recommend reading a good research paper on the topic.
Compression Affects and Parameters
In the last section, it was evident that compromising the quality was a sure way to manage size and bandwidth consumption while transferring data. When talking more in-depth about compression effects, however, it is quite important and exciting to discuss the changes an image shows when it’s processed by the algorithm and made ready for transmission. Ultimately, we cannot dramatically change the data.
Chroma subsampling, popularly referred to as color subsampling, is at the heart of compression. All the compression algorithms for the video codecs and images still focus on chroma subsampling.
Chroma subsampling derives from the fact that the human eye is more sensitive to image luminosity than color differences. The human eye can only differentiate between color differences to a certain degree. 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, 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 detail on how it saves this luminosity data will take us off topic. Still, it won’t hurt to lay down some basic facts chroma subsampling.
Chroma subsampling is represented by digits as follows: X:Y:Z (excluding the alpha channel).
- X: the horizontal sampling reference (width of the conceptual region). This vale is usually set to 4.
- Y: the number of chrominance samples (Cr, Cb) in the first row of X pixels.
- Z: the 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 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 manner 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, the human eye will not be able to tell the difference and, at the same time, we’ll 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 images in the following collage?
Now that we are familiar with the compression technique, let’s discuss the differences in images set to 4:4:4 and 4:2:0:
- The transitions between colors are not as smooth as it is on the original image.
- The colors themselves are not as smooth; a grainy texture is visible on the 4:2:0 images.
- 4:2:0 has a lower resolution resolution, which can cause the image to look more jagged or blurry.
Future of AVIF: Browser Compatibility for Chrome and Firefox
In this post, we have covered all the benefits of the brand-new image compression format, AVIF. It has the backing of top tech companies and some of them, like Netflix, Google, and Microsoft, have already implemented this format. Currently, AVIF looks like the future, but people are still skeptical about adopting it. AVIF is, to date, the best and most effective image compression format for data transmission. Royalty-free and open-sourced, the AVIF format is still in the deployment phase.
Apart from providing a smaller image, AVIF has proven its ability to provide high quality images. This has been made possible by the color depth and chroma subsampling support AVIF has incorporated. The future of AVIF is very bright. Research is still ongoing and many companies are working towards adopting the AVIF image format into their systems.
AVIF image format support for browsers like Chrome and Firefox is an exciting thing to look forward to. Once browsers are ready to roll out features with AVIF support, we will see a revolution in image compression. Firefox has already announced support for AVIF, just like AV1. However, Mozilla is testing it on Firefox Nightly before officially going live. Chrome is also expected to go live with the feature this year.
With Firefox and Chrome going live with the feature, we will subsequently see its support on chromium-based browsers like Edge and Opera.
Thank you for reading. Now we would like to hear from you: what do you think is the future of AVIF? Or maybe you have a question. Either way, go ahead and leave a comment below.