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 written on this page
What is AVIF?
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
