AVIF is an image file format developed by Alliance for Open Media which is supposed to make our images smaller while keeping the same image quality. Experts believe that it is the next step in media compression. AOMedia’s goal is to develop open, royalty-free technology for multimedia delivery, which means that nobody will have to pay anybody to use the new AVIF format (as opposed to JPG, for example). Behind AOMedia we find big companies like Netflix, Google, Facebook, Apple or Microsoft.
We could say that, currently, the most popular image file formats for web are JPG and PNG. A few years ago, WebP came on the scene, developed by Google, delivering images 30% smaller than JPG, keeping the same image quality. Now, AVIF promises images 50% smaller than JPG, and still keeping the same image quality.
AVIF has a very nice list of advantages:
- It supports HDR, transparency and wide color gamut.
- It provides the highest lossless and lossy compression possible.
- It was created in a royalty-free format, which will speed up all the adoptions, as developers won’t have to deal with legal or financial barriers.
- Behind it we find companies like Amazon, Google, Apple, Intel or Samsung, so it is no short of resources.
The first images in AVIF format were published in February 2018 by Netflix, and since then more applications and companies have been adding support for it, albeit rather slowly. We can find now AVIF support in Google Chrome, VLC or GIMP, and companies like Microsoft are jumping in the train.
On February 2020, Netflix published a blog article with objective measurements on AVIF’s image quality & compression efficiency in comparison to JPEG. For those who like technical reading, you’ll love it.
AVIF and ShortPixel
Here at ShortPixel we are already working on implementing the AVIF format on our services and plugins, so you can start enjoying the benefits of it as soon as possible!
As of now, you can already use the parameter “to_avif” when calling our API to get an image in AVIF format as described in this article: ShortPixel’s API parameters.
It’s still a new format, though…
The main and probably only drawback we can find nowadays, in 2020, is that the format is very new.
The first version was released in February 2019, and because of this, only very few applications support it. On browsers, for example, we can only enjoy AVIF on Google Chrome and, if you enable a flag, on Firefox: https://caniuse.com/avif
We also find, of course, bugs and problems that must be worked out to ensure the AV1 image file format outshines its competitors, although this is something normal one can expect from every new software.
Testing AVIF
Since it is very easy to write a few numbers and statistics, we’ve gone ahead and run quite a few tests comparing how each format is performing. Feel free to open each image on a new tab to appreciate all the details and optimization artifacts.
At the end of the article we will link to a ZIP file with all the original pictures and results we mention here. Remember that for now you can only see AVIF images on Google Chrome or Firefox!
Test #1: CR2
We start by taking a CR2 file, an uncompressed format for pictures taken with a Canon camera, and convert them to JPG, WebP and AVIF using Convertio.
- Original CR2: 32.2 MB
- JPG: 5.88 MB (82% smaller)
- WebP: 844 KB (86% smaller than the JPG)
- AVIF: 547 KB (91% smaller than the JPG)
If we zoom in the WebP and the AVIF files, we can see a clear difference in quality. AVIF looks smoother and with less optimization artifacts.
Test #2: JPG 150×150
Here we have a WordPress thumbnail, size 150×150, and we convert it to WebP and AVIF using ShortPixel‘s API and its Glossy optimization quality. For roughly the same size, it is less pixelated than the WebP equivalent.
- Original JPG: 5.3 KB
- WebP: 2.6 KB (51% smaller)
- AVIF: 2.2 KB (58% smaller)
On the following screenshot (which is zoomed in) one can see that around the small “UNIVERSITY OF” letters, the AVIF shows less artifacts as a result of the optimization. That’s why the image, not zoomed in, will appear less pixelated.
Test #3: JPG 994×559
Another JPG with a different size but converting it to WebP and AVIF using ShortPixel‘s API as well with our Glossy method. We see that AVIF is slightly bigger but the color transitions on the letters are smoother with AVIF.
- Original JPG: 129 KB
- WebP: 62 KB (52% smaller)
- AVIF: 64 KB (50% smaller)
If we zoom in, we can see the difference.
If now we try the same, but using Lossy method, the AVIF format wins again:
- Original JPG: 129 KB
- WebP: 49.5 KB (62% smaller)
- AVIF: 47 KB (64% smaller)
Test #4: PNG 1920×1080
Now we take a PNG file and we convert it to WebP and AVIF, again using ShortPixel‘s API with the Lossy compression method.
- Original PNG: 1.27 MB
- WebP: 258 KB (80% smaller)
- AVIF: 217 KB (83% smaller)
If we do the same but use the Glossy compression method we get:
- Original PNG: 1.27 MB
- WebP: 319 KB (75% smaller)
- AVIF: 285 KB (78% smaller)
See the difference by yourself:
And the winner is…
AVIF. The tests before are just an example of what AVIF can do. We have been internally performing many more tests and AVIF images are in average 19% smaller than WebP – using our Glossy compression level.
AVIF sounds and looks very promising and even though it’s still taking its first steps, it is set to be the next most popular image format on the internet. Having PNG and JPG rooted in the past, and WebP and HEIF behind patents that slows them down from being adopted as a standard, you’ll sooner than later see AVIF images when you visit your favorite site.
So, not only AVIF performs better than every single popular format, but it is already included in ShortPixel‘s services!
Author’s bio: Gerard Blanco is a freelance web designer and content writer, and a part of ShortPixel’s team. If he’s not busy manipulating CSS, you’ll find him reading the latest tech news, watching Barça matches or playing Red Dead Redemption 2.
You can get in touch with him on his website www.gerardblanco.com
Link to original files and compressed versions from testing section.
Original article Published here >
* Optimise WP Website Images with ShortPixel – Super Fast Website, Optimised SEO, WordPress Plugin (Referral Ad)
