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