banner
夜光LOEN

夜光LOEN

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

AVIF - User Experience of the Next Generation Image Format

I accidentally saved a thumbnail from Bilibili and found that it was actually in the avif format. This sparked 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, take it with a grain of salt.

Introduction#

This introduction is sourced from Wikipedia, available at: 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, along with the HEIC (High-Efficiency Image Container) image format used by Apple products, adopts the High Efficiency Image File Format (HEIF) container based on the International Organization for Standardization's basic media file format. However, the compression technology used in HEIC comes from HEVC/H.265.

In several tests conducted by Netflix in 2020, AVIF demonstrated superior compression efficiency compared to JPEG, preserving richer details and almost no block artifacts. It has less color distortion in sharp-edged, vibrant natural images and textures.

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 link: https://nomacs.org/). Photodemon supports converting to 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 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. The following image shows the comparison.

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 are its disadvantages. Firstly, it consumes more resources compared to traditional image formats, resulting in slower opening speeds. Secondly, the number of software and websites that support avif is limited. Standard design software like Photoshop and Figma do not natively support it (although Photoshop can support it through plugins). Webpages mainly use webp and jpeg formats, so 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. However, the high emotional intelligence perspective is that it is a future-proof 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 quality, faster opening speed, and smaller footprint. However, in terms of the current avif format, I don't think it can achieve all of these. Its opening and preview speeds are indeed slower, but its advantages are that it is open source and free. However, it's worth noting that webp is backed by Google and its popularity is slow, let alone avif. So, for now, it's better to stick to common file formats and just have fun with avif. Additionally, the image 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.