Will the new image format AVIF take the throne of JPEG and PNG?

Tram Ho

Opening

Hello everyone, let me startle the headline view a little bit. On August 28, Chrome 85 officially supports AVIF photos. You try a quick search on Google and you will immediately see how eager and expectant the developer community is (I don’t say anything). So what is AVIF and what is it special about the older image formats like JPEG or PNG? Let’s find out with me.

As always, you can read your original post here: http://grab-cv.com/blog/dinh-dang-anh-moi-avif-lieu-co-soan-ngoi-vuong-cua -jpeg-va-png

Historical background

Do you still use JPEG and PNG images now? Not only you, but the whole world is still using them. Websites, software, and devices like phones, tablets … all use this image format by default.

JPEG was born in 1992, PNG was born in 1996, now it’s 2020, don’t we have a better image format to replace? Wait a second, what’s so interesting about this, are they still very good? Let’s take a look at some typical weaknesses when using JPEG and PNG images:

  • Image size is too large : obviously the heavier the image, the slower the web load, the photo storage devices will quickly be “full” if you store too many images. In addition, the large image size will also make the video size large.
  • Image compression will significantly reduce quality : for the web to load faster, we usually compress the image down to an “acceptable” level (combined with crop), from a few MB to a few hundred KB for example, or even a few dozen KB. This is a common practice and “standard” of any frontend developer when wanting to optimize his website. However, you will always have to compromise between image size and image quality. If only there was a miracle that compressed the image down super low, but the quality is still relatively high then how good it is.
  • Lack of necessary functions : JPEG is a lossy image, PNG is a lossess image. JPEG doesn’t support transparency, PNG does. JPEG does not support animation, PNG is there . In return, PNG is usually larger than JPEG, so depending on the purpose of use, we often have to convert between these two image formats. If only it would be a miracle to mix all of the above functions into a single image format.

As a result, there have been many projects (by independent companies or groups) researching and developing new image formats to replace JPEG and PNG for a long time. One of them like HEIF, JPEG XR, JPEG XL, JPEG 2000, WebP, AVIF … In this article I will introduce the AVIF format as an extremely bright candidate, but can not ignore it. WebP’s brother has also been very successful. Let’s learn the “neither new nor old” image format WebP.

Introducing a little bit about WebP sunbae

WebP was born in 2010 and was developed by Google, and WebP images are now supported by most browsers. Surely you have seen this image format more or less appearing, right.

WebP images have all the functions that I listed above. It both supports lossy, lossess, transparency (alpha channel), animation … And especially, it’s very well compressed . According to Google, it reduces the image size by 25-34% compared to JPEG.

If you often use Google’s PageSpeed ​​Insights tool to evaluate the web speed, you will often receive instructions to convert your images to modern image formats to reduce the size. In fact, this tool will try to convert your image to WebP and compare the difference in size before making a recommendation.

Recommended image format conversion to speed up Google's web

What’s special about AVIF juniors?

AVIF stands for “AV1 Image File Format”, and AV1 can be roughly interpreted as the name of the compression algorithm (not only for images but also for videos). AVIF was born with the mission to replace not only JPEG, PNG or GIF, but also its predecessor WebP. Reading here, you can understand that, AVIF has all the functions as WebP that I presented above, and it is “super compressed” than WebP. I would like to re-list here if you missed the WebP introduction above. The basic functions of photos are all in a single format, AVIF:

  • Supports lossy (like JPEG) and lossess (like PNG)
  • Supports transparency (alpha channel) like PNG
  • Supports animations in .avifs format (like GIF or APNG)
  • Super-compressed with well-maintained quality (more than its predecessor WebP)

It is also important to know that AV1 and AVIF have been initiated and developed for a few years , and have also passed many tests with good results. However, from a web developer perspective, it doesn’t make any sense if the browser doesn’t support AVIF images. So on August 28, 2020, Chrome 85 officially supports AVIF images . Firefox will also soon support the default image format (currently you need to enable the image.avif.enabled flag on firefox to use it). You see browsers that currently support AVIF here

Compare

According to the measurement results of Daniel Aleksandersen at Ctrl.blog , AVIF has a significant reduction in size compared to JPEG and WebP. In particular, AVIF is on average 50% lower than JPEG, and 20% compared to WebP (you can infer that WebP also has a pretty good drop of 30% compared to JPEG).

If you only give the data, it is too boring, looking at the picture will be much more intuitive, right. Here I will choose a photo to try to compare the compression level of AVIF, WebP and JPEG.

The photo posted to the cutting board was a picture (png) of Disney’s Brave Princess. I downloaded with size 800×509, capacity 849KB . Since AVIF is still picky about the browser, I will take a screenshot for everyone to compare (it won’t be very accurate), but I will still attach the original photo if anyone wants to see it.

Original PNG photo of Brave Princess is 849KB:

The original PNG photo of the Brave Princess is 849KB

The original PNG photo of the Brave Princess is 849KB

JPEG images are acceptable to 110 KB

JPEG images are acceptable to 110 KB

WebP images are acceptable to 83.7 KB

WebP images are acceptable to 83.7 KB

AVIF images compress to an acceptable level of 78.5 KB

AVIF images compress to an acceptable level of 78.5 KB

You can see that both AVIF and WebP images are compressed quite well but still keep the quality at an acceptable level. Honestly I’m not an expert so I can’t customize the configuration to get an exact comparison. But I also tried to compress it to a level that my eyes felt reasonable (the angle of an ordinary user).

To complement the comparison, I will compress all 3 photos to the same size of about 11-12KB, let’s see the results:

JPEG images compressed to ~ 11KB

JPEG images compressed to ~ 11KB

WebP image compressed to ~ 11KB

WebP image compressed to ~ 11KB

AVIF images compressed to ~ 11KB

AVIF images compressed to ~ 11KB

As you can see, deep compression makes it easy to spot the differences between formats. If you want to dig deeper, you can read the Netflix Techblog article . This article has a lot of useful information, both technical aspects, specifications to visual illustrations.

How to create an AVIF image

Currently, the AVIF image creation tool is not much, but luckily Google’s Squoosh site allows us to convert and compress images to many different formats with different compression levels (including AVIF and WebP). If you do not know this website, it works quite similar to TinyPNG but more specifically, you can customize the format and compression level as you like. In addition Squoosh also allows you to compare images before and after converting very intuitive and convenient.

Google Squoosh Webapp

If you want to delve deeper about the source code to encode / decode AVIF images, then you can consult libavif library.

Browser support?

As I have shared above, Chrome has just officially supported AVIF less than a month ago, but that is a positive sign. Additionally, Firefox is supported with the image.avif.enabled flag enabled. Soon it will be Edge, Opera or Safari (Safari alone, I’m not sure).

So the question is should we use AVIF for our web? This answer depends on the nature and goals of your project. However, at this time, if not using AVIF, the use of brother WebP is also worth considering.

Also, another cool and safe technique if you both want to use new technology and also want to support older browsers is to use picture tags.

Epilogue

AVIF is still very young and is still being optimized in terms of both algorithm and encode / decode speed. So let us look forward to the day AVIF is as widely available as the way JPEG and PNG used to be and is “dominating the martial arts” today. However, to beat JPEG or PNG, the web is not enough. It needs to be supported by default by many other software and electronic devices (both photos and videos) to be able to take the throne. Or not, there will be another format born and continue the unfinished journey.

Hope you enjoyed my article this time. If it feels good, upvote so I have the motivation to write the next article.

Share the news now

Source : Viblo