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 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.
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?
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?
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.
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.
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". The degree of compression is amazing.
"Crushee" is also useful
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.
- Right click and select "Open with this application"
- If you have Chrome, select (probably not). If Chrome isn't your choice, click More
- After changing "Selection target" to all applications from there, 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,
- Right click "Open with"
- From "Select another program" to "↓ Other apps"
- 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
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.
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!
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.
