AVIF image. The format that blew up the Internet.

AVIF - format for images on the Internet

What happened? Various video codecs have copyrights. Such rights provide for the use of codecs on a paid basis. For example, from 1 device - 1 dollar. This approach did not suit large corporations. As a result, an alliance was created, which included such companies as Apple, Intel, Google, Microsoft, Arm, AMD, Nvidia, Amazon, Facebook, Cisco, Netflix, Mozilla.

As a result, the Alliance for Open Media created the AOMedia Video 1 format, or AV1 for short. They decided to use the technologies used for images. This is how the AV1 Still Image File format, or AVIF for short, was born. This image format is a free lossy image compression format based on the AV1 frame compression library.

The AVIF specification has received version 1.0.

Why is AVIF better than other formats? The advantages of compression are:

20% better than WEBP;

50% better than JPG. But sometimes JPG compresses better.

On average, AVIF compresses most images significantly better. An example of data obtained from testing is AVIF test. The updated Chrome browser supports the AVIF format by default. Optimization can be done now.

Which browsers support the AVIF format? List of browsers that support the AVIF format. For now only Chrome. But the browser has the largest market share, and support will also appear in Firefox.

Why implement AVIF? Goals:

Improved ranking by increasing loading speed;

Improving conversion rates by increasing speed;

Improving behavioral factors by increasing speed;

Reducing user traffic costs;

Reducing the load on the site server;

Reducing device battery consumption;

Reducing costs for outgoing server traffic.

How to implement it on the site?

There are many options for implementation.

Method 1: The best solution is to configure the web server. In this option, there is no need to even change the layout on the site pages. The markup on the site does not change.

If the server configuration is correct, this section of the site does not need to be changed.

It should also be implemented using a progressive method. What exactly does this mean? Operating principle:

If the browser supports AVIF, then display AVIF on the page;

If the browser does not support AVIF, but supports WEBP, then display WEBP on the page;

If the browser does not support either AVIF or WEBP, then JPG is output.

How to implement such a solution on a website? The solution in the form of automatic batch processing should be implemented on the server side. Option using NGINX in the example.

The implementation of such solutions is carried out by technical specialists. The optimizer's task is to correctly set the goal.

Method 2: Use the "picture" tag.

When using this markup, the browser will load the first image it supports. If the browser does not support picture, then img is specified by default.

What should I do if there is no way to implement the solution on the server side?

Method 3. If there is not enough content on the site, there is an option to use an image converter.

Squoosh now supports the AVIF format. The tool provides the ability to optimize images. The development was carried out by Google.

AVIF is a replacement for WebP, JPG and PNG. The format uses technology to compress the new AV1 codec and a HEIF container with support for animation and live photos. Animation and transparency are available. If you use AV1 AVIF files, the images will be 2 times smaller compared to JPG, and 30% smaller than WEBP.

AVSEO company keeps its finger on the pulse of all the news and innovations in search engine optimization and Internet promotion to easily bring your website to the top of Google.