What Is AVIF Or AV1 Image Format?

What is a website without pictures, right?! Yeah, so you must have noticed that the images take a little more time while loading many websites. This is because the size of the images is larger. In the past few years, WebP has taken the lead as it is 30% smaller than JPEG format. This is important, as now it is a part of Google’s web vital factor search algorithm. There have been a lot more advancements in this field. Alliance for Open Media has introduced the AV1 (.avif) format in the market, which is 50% smaller than JPEG. You can enable the format on your browsers such as Chrome, Firefox, and Edge.

AVIF format has been developed by the Alliance for Open Media, in collaboration with Google, Cisco, and Xiph.org. The good thing is that it is an open-source format, and hence it does not require any authority. On the other hand, JPEG requires some expensive licensing to be used.

Coming back to AVIF format, it is instead a super-compressed image and offers ampler quality to compress file size ratio. There are other features, such as supporting any image codec or that of GIFs. Also, it can be lossy or lossless. It also supports HDR color with better brightness, color depth, and color gamuts.

How to Enable AVIF or AV1 support in Chrome, Edge, and Firefox?

This format is new to the market, and hence many people are not aware of it. It is undoubtedly going to take some time before being mainstream. But you have it on your browser, and they are ready to be used. Well, there’s time before it just becomes the default option, but this can be looked forward to.

In Chrome, version 85 already has it enabled, but with the Firefox version 80 needs a flag that has to be enabled. You can follow the below steps enable it in Firefox,

In a new tab on your browser, type about:config in the search bar and press the enter key to open the configuration panel.
You can check through the list to locate image.avif.enabled property.
It is by default set to false, which value you have to change to true.

Microsoft Edge uses the same Chromium Engine, and hence it is expected that support for Edge should be out there soon.

How can Websites implement it?

Website owners will need to have to tweak their HTML code for this. The designer needs to use the picture element of the native HTML code to handle the fallback. In this way, if the browser does not support the new format, the browser can switch to the other mentioned format.

How to create an AVIF file?

Creating an AVIF file can be easily done using the Squoosh web app. This app is powered by the Google Chrome Labs team. You can also get to the advanced options for all the image compressors in the app. This helps you convert from other major formats to AVIF format. You can go ahead with this when you have a couple of images to tweak. But for a heavy load conversion you might need to use the AOMedia library, libavif, to encode/decode AVIF files. Also, for MAC users, you will need to handle the same using Homebrew, and you can install a pre-built version by using the required code (brew install joedrago/repo/avifenc).

The AVIF format seems more efficient as compared to other major formats available today. The fact that it improves the website loading speed is expected to be adopted real soon than the WebP format. WebP took a lot of time, but that was because the speed never mattered, and

Now it is all about how fast a website runs.