AVIF — The nextgen image format

AVIF — The nextgen image format

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

Quick read about this blog

In this article we are going to see the following about AVIF

  • What is AVIF

  • Why AVIF is better

  • How to use AVIF Images

  • Browsers supporting AVIF Images

  • Image size comparisons

  • Render AVIF images in a web page

1. What is AVIF

Before looking at what is AVIF first we have a quick look about the image history which is mentioned below 👇

Image history representation

AVIF is an extraction from the keyframes of the now popular video format AV1 developed by Alliance for Open Media (AOM).

AOM developed AVIF with the goal of providing royalty-free images with better compression efficiency and more feature support compared to the existing image formats.

2. Why AVIF is better

AVIF is compatible with high-dynamic-range imaging. It supports 10 and 12-bit color at full resolution, resulting in images that are up to 10 times smaller than other known formats.

AVIF is a good choice for web developers because

  • It is royalty-free, so we can use it for free without worrying about licensing.

  • It is currently backed by many big players in tech like Google, Amazon, Netflix, Microsoft, and more.

  • It has the most optimal compression.

  • It has more modern features packed in like transparency, HDR, wide colour gamut, and more.

3. How to use AVIF Images

There are 2 ways where we can use AVIF images

  • One is by converting your old images to AVIF.

  • Creating AVIF images with avifenc CLI

Converting old images to AVIF

Using the online AVIF converters like Squoosh where we can convert the old images which is in formats (JPG, PNG and GIF) into AVIF

Squoosh app

Creating AVIF images with avifenc CLI

avifenc is a command line application that can convert PNG and JPEG images to AVIF images. avifenc uses libavif, which is a library that can decode and encode AVIF images. If you have a lot of images you want to convert to AVIF then using the command line encoder, avifenc, is probably a good choice.

Clone the code and change the directory

git clone [https://github.com/AOMediaCodec/libavif.git](https://github.com/AOMediaCodec/libavif.git)  
cd libavif/

There are many different ways you can configure avifenc and libavif to build. You can find more information at libavif. We are going to build avifenc so that it is statically linked to the av1 encoder and decoder library, libaom.

Get and build libaom

Change to the libavif extensions directory cd ext .The next command will pull the libaom source code and build libaom staticly.

./aom.cmd

Change directory to libavif. cd ../ Build the command line encoding tool, avifenc.

mkdir build

change the build directory cd build

Create the build files for avifenc using the below command

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Build avifenc

make

Once the build successful you can now try to convert the images to AVIF format

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

“–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420” are recommended settings for AVIF images.

Avifenc has a lot of options that will affect both quality and speed. If you want to see the options and learn more about them just run ./avifenc

4. Browsers supporting AVIF Images

As of now the following browsers are supporting AVIF Image format (Edge and Safari are not supporting AVIF Images yet :(

Browser supporting AVIF Images

AVIF image format | Can I use... Support tables for HTML5, CSS3, etc
*"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile…*
caniuse.com

5. Image size comparisons

I have picked up the following image which is of png type which has the file size of around 7.9 MB which is changed to AVIF without losing the quality to a size of around 62 KB.

Image compression and it’s size in different image formats

You can find the actual implementation and the image files in different formats 👇

GitHub - nidhinkumar06/ImageCompression
*You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…*
github.com

6. Render AVIF images in a web page

The best way to go about using AVIF is with content negotiation. We will be using the HTML 5 <picture> and the <source> which supports content negotiation.

Congratulations!!!

In this blog you have seen how to compress the image to AVIF format without losing it’s quality as well as how to render the AVIF image in a web page.

Will catch you up in a new post till then Happy Learning 😏