What is the future of image compression

AVIF: Image format future and successor to WebP?

As far as web design and image formats are concerned, a lot has happened and a lot has changed. While Apple needed about ten years before WebP was even supported, the unofficial successor is already at the start. It's called AVIF and can do more than WebP, although the support will soon be much better.

Why this is so, why WebP is no longer the future, what AVIF can and promises - the following article should clarify all of this.

AVIF: Image format future and successor to WebP?


advertising

One or the other of you will definitely remember my article in which I presented the different image formats in a little more detail. At that time, the main question was which format is suitable for which type of image.

At that time we realized that there is not just one format for all types of images, but many different formats that are suitable for very different types of graphics and representations.

SVG, PNG, GIF and JPG were the examples mentioned back then, but also the promising WebP format, which seemed to make everything a little better. But now comes AVIF.

What is AVIF anyway?

AVIF is still a very fresh format. Developed in 2019, it quickly met with great enthusiasm. So big that Netflix, for example, immediately discovered the format for its own platform. The latter is no wonder, as AVIF was developed by the Alliance for Open Media. Which in turn is an amalgamation of large companies. Including Apple, Google, Facebook, Microsoft, Mozilla, AMD, Nvidia and even Netflix. The Alliance for Open Media primarily aims to make media technologies more efficient and to develop standards that can then be used jointly.

AVIF is seen as the successor to WebP and should also replace the JPEG format in the long term. AVIF was developed as a new standard format, which should shine in almost all areas. It is similar to the HEIC format that Apple currently uses, but is open, so it will spread quickly. It offers a similarly high level of compression, which ensures little storage space and high quality at the same time.

Since almost all large companies are in the Alliance for Open Media, support will not be long in coming. The Chrome browser is already ready, Firefox is working on the implementation and Apple, it seems this time, will not need another ten years for the integration (which for WebP was certainly also because it came from Google).

The only major disadvantage of AVIF at the moment is that common AV1 encoders work very slowly and consume a lot of resources. So a lot has to be done technically here so that the format can be used faster and more effectively in everyday life.

Use Picture-Tag and wait

There is currently no support for AVIF. It's all yet to come. Currently only Chrome and Opera support the new image format. The implementation in Firefox is already running, Safari will certainly follow soon, although it is still completely unclear when this will be the case. First of all, there is support for WebP ten years too late, which is finally finding its way into the browser with MacOS Big Sur.

However, times have changed. Anyone who wanted to use WebP at the time had to program complicated fallbacks in some cases so that the iPhone and MacOS delivered an alternative. This is very easy today with the picture tag.

As with other media, the picture tag goes through the entries one by one. If the first format is not supported, the browser tries to load the next. If that is not supported either, it goes to the next one and so on.

This makes it possible to save AVIF first, then WebP and then a JPG. Although I would personally do without WebP completely because it no longer has a future for me. In this way, an AVIF image can already be used without the support being restricted.

<picture> <source type="image/avif" srcset="snow.avif"> <img alt="Fallback" src="fallback.jpg" </picture>

WordPress also needs a small snippet to upload AVIF files. As with the image processing, the support is not yet given and has to be done first.

An online converter is therefore also used to convert AVIF files, as most programs currently do not fully support it.

JPEG vs. WebP vs. AVIF

A picture is worth a thousand words and that's why I've created some examples for you here.

First and foremost, they should make it clear how the differences between the individual formats are noticeable.

The JPEG is available as an original and will be optimized again accordingly.

The goal in the example was NOT a lossless optimization, but a representation of how the optical differences turn out with very strong compression.

Example 1:
It's nice to see how the JPG fails completely and forms artifacts. If you enlarge the picture, you can also see that WebP and AVIF hardly differ from each other, but WebP tends to form artifacts more quickly (see sky).


Click to enlarge

Example 2:
AVIF also shows that it is on par with PNG when it comes to shapes. While the optimized PNG is still 2 KB, an AVIF manages to achieve a minimum of 1.5 KB with almost the same quality. WebP, on the other hand, looks completely washed out with such high compression.


Click to enlarge

Why do we need AVIF?

Almost all image formats date from the 20th century. At that time there were different demands, streaming and visually stunning websites, for example, did not even exist. Today, thumbnails determine the Internet. Whether on YouTube or Netflix, whether for articles or blog posts - everything has its own preview image.

That in turn means that we need a new format. One that was developed for this requirement from the start. Which is as small as possible, can be loaded in the best possible way and does not consume too many resources in the creation. WebP was such a format, but it came from Google, which is why many did not want to use it and it never became the standard.

AVIF is like WebP, only better optimized. It comes from the Alliance for Open Media and is an open standard that arises without license fees or idiotic power games by individual corporations. We need AVIF to finally get rid of the formats of the 90s and to lead the representation of images on the web into a new era. In fact, very urgently.

It is as if you rework your old Opel Kadett over and over again, improve it and equip it with modern parts, but leave the engine untouched. So whatever you try, it remains essentially an Opel Kadett. It has been slightly improved, but it still doesn't become a Tesla.

Conclusion and prognosis for AVIF

It took a long time, but finally all big companies are pulling together and creating an image format that expands the advantages of WebP and is ready for the future. Support is not yet fully available, but it can be assumed that all platforms, systems and browsers will soon support the AVIF format.

I especially like how much AVIF can be compressed without looking bad. It forms fewer artifacts and even with extreme compression looks a bit more blurred than directly pixelated. If you can do without details, you can optimize particularly hard without finding artifacts.

Of course, it all always depends on the picture. Basically, however, AVIF is the future for me. The fact that Netflix is ​​already betting on it speaks volumes too. Personally, however, I will wait until I no longer need the picture element and can replace all graphics with AVIF without fallback. It won't be long now.

What is your opinion on the new image format? Are you ready to use it yet?

Free newsletter with tips, examples, insights ...





advertising
«Previous articleNext article»