# 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 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055221246/69555199-9dc3-46c8-b7de-38cbffb0c2fe.gif align="left")

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 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055222991/0891cf84-9e2d-4078-8cf1-099b2d96cdaf.png align="left")

Image history representation

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055225496/ef03d2d7-2af1-478d-85bd-48be270afc68.png align="left")

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](https://squoosh.app/) where we can convert the old images which is in formats (JPG, PNG and GIF) into AVIF

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055228230/f72930d6-2374-4650-8984-e80ed5a7ac58.png align="left")

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**

```javascript
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.

```javascript
./aom.cmd
```

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

```javascript
mkdir build
```

change the build directory `cd build`

Create the build files for avifenc using the below command

```javascript
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 :(

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055229851/6d5cf975-2f06-44c8-aa96-f0f2d4af2878.png align="left")

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](https://caniuse.com/avif)

### 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**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055231932/a404e043-3903-4bef-b9ca-a1f5a0f4f1a0.png align="left")

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](https://github.com/nidhinkumar06/ImageCompression/tree/master)

### 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055234097/2a5c29e9-34e3-4e1a-bd3c-e6fce51def43.png align="left")

### 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 😏