What is AVIF lighter than WebP? Explanation and how to make the strongest next-generation image format

Under the influence of Core Web Vitals, many operators are struggling to gather information on display speed and image compression.

Nowadays, "WebP" is widely supported by browsers and is the most easy-to-use and highly compressed image format.

This time, I will explain "AVIF", a next-generation image format that has made it possible to reduce the weight beyond that of WebP.

What is AVIF?

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

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.

It is a format that can reduce the size by about 95% or more compared to jpg and nearly 30% compared to WebP.

Originally, there was a format called "HEIF" format with a paid license. However, due to the high license cost and the fact that the authority is divided into multiple organizations, it did not spread as expected.

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?

There are some major features, but as far as I understand,

  • 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

What a place, such as.

Originally, it is a video codec, so it fits into the present era that it can be immediately applied to media such as Netflix.

What are the disadvantages of AVIf? What is the support status?

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

0024f40c7c72eafff27e0340e8163996
avif support status

After confirming with the familiar "Can I use" in the format confirmation, as of January 28, 2022, "Chrome 85 ~" "Opera 71 ~" "AndroidBrowser 97 ~" "SamsungInternet 14.0 ~" are the main correspondence It is a browser.

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

It seems that the range of correspondence is wider than when I was writing the article.

However, it seems that it is not compatible with IE and Edge, so it will be necessary to separate it when using it.

Is there any implementation support for conditional branching?

Some browsers already support it, so if it is possible to support AVIF, we recommend that you give priority to AVIF as much as possible.

You can easily implement it by using the picture tag.

I think it would be good to read AVIF first, then WebP, and if that doesn't work, read jpg, png, etc. 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

We recommend using "Squoosh", which is developed by Google Chrome Lab and can compress images.

You can easily convert to AVIF just by throwing in an existing jpg or png image.

In addition to AVIF, 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…

This popular tool was also useful

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". When it comes to avif, the degree of compression is amazing.

How to check avif image

The author said, "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

Since my main machine is mac, I will 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 it (probably not). If Chrome isn't your choice, click More
  • 3. From there, change "Selection target" to all applications, and then 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.

See also here for batch replacement of images

In the above "sqoosh", it is possible to replace the images in the folder at once using the command line.

Since I use the terminal app, it may be difficult to listen to a few sentences, but I have summarized it in an easy-to-understand article, so please take a look here.

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, the format called WebP is gradually spreading, but there are many sites that have not caught up with it, so if the above compression support is possible, there will be no problem.

summary

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

I think it's still a developing format, so I'd like to keep updating this article as information comes out.

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"

What is written on this page

When it comes to web marketing
Please feel free to contact us

cocorograph inc.
〒150-0002
Miyamasuzaka Building 203, 2-19-15 Shibuya, Shibuya-ku, Tokyo
mail: [email protected]
tel: +81-50-1748-9550
url: https://cocorograph.co/

© 2021 cocorograph Inc.