The new AVIF format to compress images

Introduction

In the web world, .JPG and later .PNG formats make up the majority of bitmap content (ie digital images) that exists on the internet. These formats are followed by .GIF (animated or not), .BMP and the recent .WEBP. All of these formats are encoded or compressed with different codecs, just under the crucial reason for a bitmap file to be smaller in weight, and thus download/appear faster. Consider that, in the real world of photography, a digital camera obtains a photo in .RAW format ('raw' format, let's say) that can weigh 10 or 20 megabytes (depending on the quality of the camera). That same image, loaded in Photoshop and exported to the web in .JPG format, perhaps weighs one (1) mega with a more than acceptable visual quality to be viewed on monitors/cell phones.

As we said, on the Internet we need these compressed formats to relieve the time (and life) of users. On an average cell phone and with a 3G connection, a single photo of a mega or 500kb would slow down the loading of a site so much that anyone would flee in terror (or you would think the site is "down").

The .WEBP format —currently developed by… sure, Google— was in itself a breakthrough in the world of bitmaps. Based on video compression VP8, is a superior alternative to the popular and historical .JPG and even .PNG: .WEBP has been extensively proven to provide a smaller file size at equivalent quality compared to PNG and JPG. This means that, for example, if we compare the same photograph and the same weight in .WEBP versus .JPG or .PNG, it is .WEBP that will give us a better quality. What do we invest that quality in? Well, to further reduce the weight of the file to the point that .WEBP will give us a good or acceptable image quality at a file size that in .JPG or .PNG would look dull and pixelated.

The lossless (ie no 'destructive' compression) format of .WEBP can compress images up to 26% more than .PNG, while .WEBP lossy images are 25-34% smaller in size at equivalent quality compared to JPG

Clarified this, let's go to the reason for the note: the new .AVIF format

Is .AVIF better than .WEBP?

Yes. Although both .WEBP and .AVIF are both based on compression originally developed for video (as we said, VP8 codec for the former, codec AV1 for the second), .AVIF reduces the weight of a .JPG by an average of 50%, that is, it achieves an improvement of 25% with respect to .WEBP.

Again, we point out that the new .AVIF format, at the same weight as a .JPG or .WEBP image, will provide us with better image quality. However, it saves a difference with respect to .WEBP: .AVIF does not support progressive loading rendering, something that both .JPG and .WEBP allow (as long as we export a bit image with that quality).

Is this detail important? What progressive rendering allows is that we begin to see a 'haze' of the image as soon as it begins to download in our browser, sharpening its sharpness as the end of the download approaches. This resource is used to present a possible better accessibility to the content, preventing, for example, that the text blocks change places while the elements that make up a page are downloaded.

Nevertheless, when we use the variables width Y height in the IMG tag, browsers will already know in advance what space to reserve to host said image, and therefore we prevent scrolling which also skips progressive rendering. So, that .AVIF doesn't have this capability is a very, very relative drawback.

Is .AVIF supported by Chrome, Edge and Firefox?

This is an excelent question. The answer is 'neither'. Let's see: since last year (August 2020), Google Chrome includes support for .AVIF images by default. If we consider that Chrome is used by 67% of desktop users, and 61% in the mobile device market (statistics here) we can state that AVIF is here to stay.

We said that Chrome supports .AVIF 'by default' since in the case of Firefox, it must be enabled —for now— manually. To do this, one must type about:config in the address bar (which allows you to access Firefox's advanced settings), and there look for 'avif' to toggle its state from FALSE to TRUE.

A test method to know exactly if our browser is being able to read .AVIF images is found in this address. The result is always shown with the same image, so read the message in English about it carefully.

Meanwhile, since edge has embraced chromium —Google's free and open source development—, it is expected that in its next update it will become compatible with .AVIF (and as soon as this happens we will update the note). Here we can see the status of the push progress by the Microsoft guys.

Starting to serve AVIF if a browser supports it

No need to wait for every browser on the planet to support AVIF compression: we can use the PICTURE tag to carry out a condition and offer two file versions depending on whether or not AVIF is supported on the PC/cell phone of our visit. Let's see:

Netflix invites you to use AVIF

'What what?' Yes, you read well. The video streaming company Netflix employs —and promotes— the use of AVIF, and in fact has published its open source code on Github so that anyone can check its effectiveness when it comes to compressing images. By downloading the files from the URL we have provided you will have in your possession a transparent tool that compresses a provided image to JPG and AVIF to the same file size proving that, for equal weight, AVIF has superior quality.

Why is Netflix promoting AVIF? Because they have sought a better solution than JPG for their streaming video catalogue, so that searching for a series, movie, or browsing their catalogue, whether on a Smart TV or on a mobile device, flows as quickly as possible. Netflix itself explains its adoption of AVIF here.

The screenshot above shows an original image from the Kodak database, the JPEG 444 compression resulting in 13,939 bytes, and the AVIF 444 resulting in 4,176 bytes. Note that the JPEG encoding shows 'artifacts' (gross pixelation) around most of the edges, especially on the sloped wood, and a marked shift in color tone. By your side, AVIF encoding looks 'cleaner' even at a third the size of JPEG encoding. It lacks the detail of the original photo, but with a compression factor of 282x it would have been possible.

AVIF and Photoshop

Photoshop takes its time to incorporate new technologies, particularly when it comes to compression codecs. if we go in here We will see that the community that uses Photoshop has already put together a thread requesting the export to AVIF and with good reason. The reaction of the people behind Photoshop was to put together a vote to measure the urgency or claim of the people (terrible; as a faithful user of Photoshop I would also like to have this tool running right now).

Note: Photoshop hasn't even added support for the 'older' WEBP yet, so we can guess that with AVIF it will be late to the party.

AVIF and CloudFlare

Among the true enthusiasts of AVIF becoming practically a standard on the internet we find CloudFlare, the company that provides the best-known CDN service on the planet.

In case you don't know what CDN or CloudFlare is, we tell you that CDN comes from the acronym Content Delivery Network, that is, Content Distribution Network, a seservice that we explain here. It is worth clarifying that at Duplika we offer you CloudFlare within all our hosting plans.

In CloudFlare's own words, 'AVIF compression is so good that images can be reduced to half the size of JPEG and WebP.' You can read the full note here.

AVIF and Windows 10

Fortunately, Microsoft decided to include support for AVIF images starting with version 19H1. This means that its main applications painting and the File Browser they can read and work with AVIF having updated the platform. Soon support for the app is expected Photo in this year 2021.

How to know when an image is optimally compressed?

Both .JPG and .WEBP and .AVIF allow different levels of compression. Of course, the higher the compression, the image will weigh less but it will also look worse. So what is the fair measure of optimization?

If a user looking at the image finds it pixelated, blurry, and/or discolored, it can generally be said that the compression has gone too far, but a little less compression will make it acceptable. It is normal for an image to be compressed to lose details and delicacies, since the most effective compression, lossy, removes information, especially where the eye can hardly see it. This is justified as long as the details that are lost are not significant to the context of the image.. When it comes to selling a detailed product, painting, photography and so on, we probably need to be more careful with the level of compression we apply.

The image above shows an original photo next to three compression variants. The second photo, compressed to 40%, may be optimal: the sky still has definition. We see that with the 10% and, of course, with the 0%, the details tend to be lost to the point where it is even difficult to clearly identify what we are seeing. Nevertheless, if for reasons of context, in the photo we try to show the composition of the soil (its texture) we should think of a quality 50-60% in order not to take away so much detail.

It is important to note that the best compression for a photo will depend on the photo itself. The more textures a photo has (for example, the ground in our example), the size of the photo cannot be compressed as much as it would be the case, for example, photos of skies.

How do I convert my images to .AVIF?

If we want to start using this format right now, we recommend an online tool to do so: squosh. Remember to select AVIF as the output format, and always set the compression “effort” to the maximum (it takes longer, but gets better results). Using Squoosh we achieved the following results using a 400px X 590px image.

The difference between WEBP and AVIF at the same default compression is 10 kb less in favor of AVIF. In other words, AVIF compressed a third more in relation to the weight that WEBP has. Note, furthermore, that where WEBP shows pixelation (clothing lines, for example), AVIF shows smooth curves, without pixelation.

Depending on the image that we need to compress and the fine configurations that we apply in each case, very different results will be obtained. If our intention is to compress a handful of images it is worth taking the time to play with the maximum and minimum quality. If, on the other hand, we must compress many images, it is best to leave the default AVIF configuration.

Note: Squoosh also allows us to compress without affecting the image; To do this, just check the option lossless. Of course, the size of the images will be larger because we are preventing AVIF from doing what it does best: removing information without the eye noticing it.

Conclusions

• AVIF is a digital image compression format based on the AV1 video codec
• At the same file size, AVIF gives more detail than the one that WEBP can provide.
• Many companies (including Netflix Y Cloudflare) have given it the go-ahead or are actively working to make it a standard.
• Chrome can read AVIF smoothly and by default. In firefox for now you have to activate it manually (explained in this note). edge it is based on Chromium and therefore its compatibility with AVIF is imminent.
• windows 10 updated you can read AVIF and also edit it with PAINT.
•  Photoshop doesn't yet export AVIF (nor does WEBP, for that matter).
• The recommended online tool for testing and downloading your own AVIF files is squosh.

AVIF is a reality, although, as with anything new, the insertion time can be slow. However, it is estimated that AVIF will achieve its goal at a faster rate compared to WEBP. Somehow, the use of the WEBP format and its absorption by developers favor that these new technologies are inserted more quickly.

If you liked this note, you have a WordPress site and you want to automate the optimization of all your images globally, do not hesitate to evaluate our service Managed WordPress. We take care of everything, including moving your site.

If you don't have your site yet, what are you waiting for get it now?

We read all opinions and queries in the comments. We are here to help.

Thank you for reading.