[Latest November 2022] What is AVIF that is lighter than WebP? Explanation and how to create the strongest next-generation image format

Under the influence of Core Web Vitals, there are many operators who are struggling to collect information such as knowledge about display speed and image compression.

Nowadays, "WebP" has become widely supported by browsers, and it is said that it is an image format that is easy to use and has a high compression rate, but this time, "AVIF" is an image format that has made it possible to reduce the weight even beyond that webp. I will explain about that.

What is AVIF?

30622df4673610e99f1da8227a1c87c0

What is AVIF?AV1 Image File FormatAbbreviation for, which is an image file format specification for compressing images and image sequences with AV1 and saving them in the HEIF file format.

Since it supports HDR (high dynamic range) color, it can also support alpha channels and animation.

It is possible to reduce the size by about 95% or more compared to jpg and by nearly 30% compared to WebP.Format.

Originally, there was a format called "HEIF" format for paid licenses, but it did not spread due to the high license cost and the fact that the authority source is divided into multiple organizations.

After that, "AVIF codec" was developed as a video codec without royalties, and "AVIF" released in February 2020 was diverted for still images.

What are the benefits of AVIF support?

There are some major features, but as far as I understand, they are as follows.

  • Higher image quality and more compact than WebP (even if the size is the same, the image quality is high and block noise peculiar to JPEG does not occur)
  • Jointly developed by a consortium of a wide range of companies such as Amazon, Netflix, Google, Microsoft, Mozilla (Facebook and Apple will also participate later)
  • Various sampling methods

After all it is the best that it is light.
Originally, it is a video codec, so I thought that it would be suitable for this era to be immediately applicable to media such as Netflix.

What are the disadvantages of AVIF support? What is the browser support status?

When you hear about the next-generation image format, what you care about is the status of browser support.

Even at the time of webp, IE was not supported now, so it took time to use it with the conventional image format, but what is the current state of AVIF?

f610b48461beca491b458d92a2df0947

When I checked with "Can I use", which is familiar with format confirmation, as of August 25, 2022, "Chrome 85~", "Opera 71~", "AndroidBrowser 104~", and "SamsungInternet 14.0~" are the main support. You are now a browser.

"Firefox" can also be supported by default from "93 ~".

It seems that the number of browsers that can support it has expanded since the beginning of writing the article.

However, it seems that not only IE, which has ended support, but also Edge is not compatible, so when using AVIF, it will be necessary to use it in combination with other image formats.

(Added in November 2022) Support for macOS Ventura and iOS16 safari started

iOS 16 was released on September 12, 2022, and macOS 13 Ventura was released on October 25, 2022.

AVIF support has finally started around iOS.

However, whether or not it will become popular depends on whether it is recommended by Google or not, so we need a little more time to see what happens in the future.

Also, both OSs have just been released, so it seems that it will take some time either way.

Implementation support with picture tag is desirable

Some browsers already support it, so if you want to do what you can,Correspondence with picture tag is recommendedTo do.

It is convenient because you can easily support the browser by using the picture tag.

First, AVIF, then WebP, and if that doesn't work, jpg, png, etc. are read in that order.

Setting example with picture tag
<picture> <source srcset="img/AVIF画像のファイル名.avif" type="image/avif"> <source srcset="img/WebP画像のファイル名.webp" type="image/webp"> <img src="img/デフォルト画像のファイル名.jpg" alt="Description of Photo"> </picture>
Code language: HTML, XML (xml)

By conditional branching in this way, you can apply the next-generation format if the browser can support it, so please try it.

How to generate an image in AVIF format? Is Photoshop compatible?

c7415d28c9b68539082addcb75ad5eef
"Squoosh" familiar to us

Image compression developed by Google Chrome Lab is possibleRecommended to use "Squoosh"is.

You can easily convert existing jpg or png images by simply dragging and dropping them.

Besides, it can be converted to MozJEPG, WebP, etc.

https%3A%2F%2Fsquoosh
favicons? domain = squoosh Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro…

The popular tool "Compress Images" was convenient

In January 2022GigazineBut it was introduced and became a hot topicWebUtilsof"Compress ImagesThe tool "" was also a very good touch.

8d31a80bee97668c8bdaad07364d53e5
Simple UI


As a web tool that can compress image files while protecting privacy, it can be used offline because images are not sent from the browser to the server even though it is a web tool, and there is no worry that image data will be intercepted or stolen. about it. (See Gigazine article above)

The usage is similar to Squoosh introduced earlier. If you want to "compress" like this time, select the second "Image Compress" on the right side. Then, the following screen will appear.

8a2978e1fa1fcae5d1064d65268d5bb8

You can select the image by dragging and dropping, or you can select it.It is also possible to select multiple images from folders at once and compress them.is.

753822df4a6acc30240643a7573cefa6

As of January 2022, there are five formats that can be selected: "JPEG", "PING", "WEBP", "AVIF", and "JXL".

You can adjust the size and image quality of the image in "Advanced Setting" on the right side.

eb3c522f221aef4d37a953bf669092bd

just,It is not possible to adjust while watching the selected image quality in real time like SquooshSo it's a good idea to do it around the default of 75%, or make some adjustments on a single image to find the right line.

After completing the settings and other settings, press the "Convert" button and wait for compression. If the number of images is small, it will end immediately.

023f32bae3197c34ef47cee63a2a373d

When the item "Download" is displayed, compression is complete.

When I compressed with the above settings, the compression was "-95.571 TP2T". The degree of compression is amazing.

"Crushee" is also useful

4a3f763714db88854306dd1e8d11d5f3

This "Crushee" also has useful functions as an image processing application.

When converting, you can adjust not only the extension but also the quality like sqoosh, so you can convert at a detailed level.

There aren't many apps and tools that say "WebP is supported, but AVIF is also supported", so please use tools and apps that are easy for you to use.

How to check and display AVIF images

First of all, if you try to open it normally, it will be "I was able to compress it, but I can't open the image."

There are still few applications that support the extension, so you need to devise something when opening and checking.

When checking AVIF on mac

I'm a basic mac user, so I'll explain about mac first.

This is simple, but from the download folder of the finder etc.

  1. Right click and select "Open with this application"
  2. If you have Chrome, select (probably not). If Chrome isn't your choice, click More
  3. After changing "Selection target" to all applications from there, select Chrome.
8b64cb4f666a1c6acdf1892953fc6a55
Change here

I was able to open it with this procedure. I think it's simple and safe.

When checking AVIF on Windows

If you open it at this level even on Windows, I think it will not change much.

Similarly,

  1. Right click "Open with"
  2. From "Select another program" to "↓ Other apps"
  3. Select Chrome

It is a flow.

In both cases, you can see the image without any problem if you open it through a compatible browser.

ImageGrass can preview AVIF

d6f0c6d6dd774e21bd4f210413a45193

I recently learned thatImageGrassIt seems that you can preview AVIF with an application called ".

Japanese is not supported by default, soLanguage pack for Japanese supportPlease download and change from settings.

The supported formats are very rich and the UI is simple, so please take advantage of it.

See also here for batch conversion of images

With "sqoosh" introduced at the beginning, it is possible to batch convert images in folders using the command line.

It is recommended for large-scale sites with a huge number of image files, as compression and Webp generation will be performed without permission just by running the command.

Initial settings are done using the terminal app (screen full of black characters), so it feels a little difficult for those who are not used to it.

We have an article that summarizes it as clearly as possible, so please take a look at it.

https%3A%2F%2Fcocorograph
favicons? domain = cocorograph How to perform SEO image optimization in a batch [squoosh-cli] | Cocorograph Inc.
Display speed is becoming more important in implementing SEO measures, but in order to improve display speed, it is important to reduce the capacity of the entire web page, and the ratio of images to the capacity is very high. Therefore, image optimization is a high priority. This time, the optimization of such images is efficient ...

Is there a tool that can be edited?

At the moment, the most familiar tool is "paint.net" that can be used on Windows, and it seems that you can edit and save images in AVIf format.

Adobe Photoshop etc. are not supported, and it seems that it will take time to develop.

At present, WebP is gradually spreading, but AVIF has not caught up yet, so if the above compression support is possible, there will be no problem.

Shopify will start supporting AVIF from August 29, 2022!

ca1b8780030aec60c585acb8adcc335e

Shopify will support AVIF distribution from August 29, 2022Did.

Below is a quote from the official

Added support for delivering storefront images in AV1 Image File Format (AVIF) in addition to WebP for better performance. Shopify detects the image formats supported by client browsers and automatically optimizes for quality and file size.

It is said that the distribution status of the end user's browser will be automatically determined, and it will be displayed as AVIF on compatible browsers.

As expected, Shopify is on the cutting edge.

In terms of WordPress, I have a hunch that EWWW Optimizer will support the distribution of different AVIFs.

Wait for further information.

summary

Looking at the compression ratio as a result of actually using the compression tool, I was surprised that it would be so light.

* We will continue to update the articles from time to time.

I hope this article will be of some help to you.
If you have any questions after reading the article, feel free to Twitter (@kaznak_com) Etc., please ask.

see you.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"