YavarTechWorks
Published in

YavarTechWorks

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 👇

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 👇

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

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

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.

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

change the build directory cd build

Create the build files for avifenc using the below command

Build avifenc

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

“–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 :(

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.

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 😏

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nidhin kumar

As a species, we have an inbuilt need to connect with others to communicate and share.