In this tutorial, we shall be talking about a new way to distribute images better. The technology world is restless in providing better ways to serve media across. Images are apparently the most common media anywhere in the world, as a result, this has brought about many formats to represent it better. The most popular formats include JPEG, PNG, GIF, WEBP and .... but wait, AVIF! — the newcomer!

What Is AVIF?

AVIF stands for AV1 Image Format, as at the time of this writing, AVIF is the newest acceptable image format on earth. It is an extraction of frames from the now popular AV1 video stored in the HIEF file format. AVIF is created by Alliance for Open Media (AOM), the same organization that developed the AV1 video, with contributions from other tech giants like Google and Apple.

The purpose of creating AVIF is to provide images with better compression efficiency and more feature support compared to the existing image formats and it has just spelled the need. AVIF is royalty-free, making it easy for you and me to adopt. AVIF version 1.0.0 was released in February of 2019.

What This Means for a Web Developer?

As a web developer, this is just a new way to serve your content better and lighter to your users. The web page comprises about 51% media, having images claiming the larger portion of it, and because images claim the bigger part of a web page size, AVIF is just a solution to drastically improve your web pages speed, which also means a change to user satisfaction and SEO in whole.

Why Choose AVIF?

Whether you are a developer, blogger, or graphic artist, here are a few of the many reasons you should fall in love with AVIF:

• Currently backed by the giants in tech like Google, Amazon, Netflix, Microsoft, and more.
• It is royalty-free, free to use for everyone without paying.
• It currently allows the highest compression possible.
• Because it’s just a frame extraction from AV1 video, it also ships with the features provided by AV1 video codec, these include transparency, HDR, wide color gamut, and more.

A greater chance that AVIF will be the next big thing for media because of its extreme gap in compression size, experiments show that AVIF could save up to 80% less than the other known formats.

How to Create Images AVIF format?

The easiest way to create images in AVIF format is to convert your old files to AVIF format first, having the .avif file extension. Don’t worry, this is simpler than you think. Because AVIF is new, there are few to zero application software that currently offers this, but I am happy to tell you that there’s an online solution. This online AVIF converter is currently the fastest converter available to quickly transfigure your old formats to AVIF. All you need to do is:

1. Visit the Online converter.
2. Upload your old formats (can be PNG, JPEG or GIF).
3. Wait while it processes on the server.
4. Download and save your new AVIF files.

Use AVIF on your Website

Even though AVIF has been adopted almost by all web browsers, because of its new age, chances are that your users current browser might not have been update yet, it is still necessary to use content negotiation when importing AVIF on your websites:

<picture>
<!-- use AVIF image if the browser supports it -->
<source type="image/avif" srcset="sample.avif">
<!-- in case the browser does not support AVIF -->
<img alt="A Fallback image" src="sample.jpg">
</picture>

AVIF Support

• Chrome 85 is the first browser to fully support AVIF, starting from the Chromium version 85, released in August 2020.
• Mozilla is working on support for the image format in Firefox.[155] Cloudflare announced AVIF support in a blog post on 3 October 2020.
• Microsoft also included support for AVIF in the Windows 10 "19H1" updates.

I want to believe that you are now convinced to start using AVIF in your next projects, what about your previous projects? Make your web pages media lighter now by using the latest image format, let me know your opinion in the comments below!