banner
夜光LOEN

夜光LOEN

👨🏻‍💻热爱开源的前端小菜鸟 | 🆓喜欢开源和白嫖 | 🐋喜欢摸鱼

AVIF - User Experience of the Next Generation Image Format

I accidentally saved a thumbnail from Bilibili and found that it was saved with the extension avif. This piqued my curiosity because the thumbnails on the website are usually in webp format. So I decided to try it out. Since I'm not a professional in image processing and only an amateur designer, my experience is limited. So let's just take it as a fun experiment.

Introduction#

This introduction is from Wikipedia, the address is: https://en.wikipedia.org/wiki/AVIF

The AV1 Image File Format (AVIF), developed by the Alliance for Open Media, uses AV1 video coding technology to compress images. It is a file format for storing general images and animated images. AVIF and the HEIC (High-Efficiency Image Container) image format used by Apple products both use the High Efficiency Image File Format (HEIF) container based on the International Organization for Standardization basic media file format, but HEIC uses compression technology from HEVC/H.265.

In several tests conducted by Netflix in 2020, AVIF demonstrated better compression efficiency and preserved more details compared to JPEG. It has almost no block artifacts and less color distortion in natural images and textures with clear contours and vibrant colors.

User Experience#

Currently, there are not many websites and software that support the avif format. Fortunately, my image viewer, nomacs, supports this format (this software is also free and open source, download address: https://nomacs.org/). And photodemon supports converting this format. Here are two sets of comparison images. You can see the difference between the two and guess which one is avif and which one is jpg (to be honest, I can't tell the difference).

Image 1

Image 2

Okay, let's reveal the answer. The one on the right is avif. The size of the first image in jpg format is 344KB, while the size of avif is only 32.5KB. The size of the second image on the left in png format is 1.53MB, while avif is only 51.2KB! It's really amazing! In addition, I compared avif with webp and found that avif is clearer at the same file size. As shown in the following image:

Image 3

Pros and Cons#

The advantages of avif are obvious: small file size, high image quality, and support for transparent backgrounds. But what I want to mention more is its disadvantages. First, it consumes more resources compared to traditional image formats, resulting in slower opening speed. Second, the number of software and websites that support avif is limited. Industry-standard software like Photoshop and Figma do not natively support it (although Photoshop can be supported through plugins), and most websites mainly use webp and jpeg. In other words, there are very few places where avif can be used. It can be said that no one uses it, which is currently its biggest drawback. Of course, the high emotional intelligence response is that it is a future image format.

Chat#

To be honest, I still hope for a perfect image format that supports a wider color gamut, smaller file size, better display effect, faster opening speed, and smaller footprint. But as for the current avif format, I don't think it can achieve all of these. Its opening and preview speeds are indeed slower. However, its advantages are that it is open source and free. But we should also know that webp is backed by Google and its popularity is slow, let alone avif. So for now, let's stick to the common file formats and just have fun with avif. By the way, the file conversion software used in this article is photodemon, which is also a free and open source image processing software. It can export avif format, but you need to install a plugin separately (just click "Save as avif" and it will prompt you to install). If you're interested, you can try it out yourself!

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.