New Pic on the Block

When I started making websites, back in the day of dial-up modems image compression was a big issue. I’ve written various blogs over the years about ways to manipulate the image content to reduce the stored information and save precious kb, or about suitability of file format such as when to use a .png over a .jpg, but is that ancient history? Can I rip up my rule book?

Let’s look a little closer at the new AV1 image compression format, or AVIF as it’s known to its friends.

Lossy

The way that older generation image files managed to reduce file size was by leaving out information. For example, in a jpeg (or .jpg) when 2 pixels were next to each other were not the same colour, but close enough, the file compression would latch onto the ‘close enough’ bit and run with it by changing the colours so they are the same, meaning the information that needs to be stored for those 2 pixels now only needs to be one value. To the human eye the different was hardly noticeable, that is unless the compressions setting were set too high and then the image would start to become blocky. Each time a jpeg is saved the file compression tries to do its thing, so the image is constantly losing quality - lossy.

Lossless

AVIF is a bit special. As if by magic it manages to make the file size of the image considerably smaller without any loss of quality - lossless*. Or at least that’s the claim.

* It's worth noting AVIF settings are configurable so, like any image manipulation you may still need to experiment to the right compromise between quality over compression. 

Smoke and mirrors

Image compression, whichever method, ultimately comes down to an illusion and tricking the brain. There’s a fine balance between how much compression can be made, but still leave the image ‘acceptable’ to the viewer. What is deemed acceptable is obviously depending on a point of view.

Now I’ll try and leave out the science, simply because it’s beyond me anyway, but what’s Infront of you isn’t always exactly how the human brain interprets what it sees through your eyes. Your brain is good ‘generally’ good at leaving out the clutter and presenting you with a view of the important bits at first glance.

For example, if you were looking for a friend in a crowd your brain would allow you to scan the faces and would recognise your friend.

If you were then asked (without looking back) to describe three other people in that crowd, you’d probably discover you didn’t really take any notice of anyone else. But you would still know you had been looking at a crowd of people.

In very simple terms this is how AVIF works, it manages to ‘blur’ the bits of an image that don’t really matter (the crowd) but still allows your brain to focus on what’s important (your friend).

Back in my 2-part blog of 2017 I described this process in great detail, as manual process, and it’s what I used to do 20 years ago to reduce images sizes for faster loading over dial-up modem.

Read the previous blog: webnetism.com/blog/making-better-pictorial-web-content

Until now this level of compression has only been able to be achieved with human involvement.

Previous image compression applied blanket rules to modify the pixels with no regard for the information contained within them

AVIF is next level clever, I suppose you could label it as artificial intelligence.

How does it work?

If 2 pixels next to each other have a strong contrast it will determine that this is a change in information, such as a strong divide between two objects, this is important to the viewer so is left unchanged. However, if 2 pixels next to each other are similar in colour/shade it’s likely the information they portray is not as important so the pixels can be blurred.

It’s the blurring of less important parts of the image that allows the file ‘throw away’ the kb needed to store that information. So exactly as my manual example in the blog mentioned above, but this time it’s being done for you.

But is it true?

Well to answer that let’s look at some examples. At time of writing Adobe Photoshop does not support save as AVIF by default, but there are third party plug-ins available.

I tested a ‘save as AVIF’ plug-in for Photoshop and the results were disappointing to say the least. Opening in a jpeg and straight saving out as AVIF did reduce the file size in relation to the original. But I would never upload an unoptimized image straight to a website anyway.

The difference in file size between the saved AVIF and the legacy ‘save for web’ export found in Photoshop was negligible. So let’s hope Adobe get on board and include native AVIF exports soon.

If Photoshop isn’t going to help me I took to Google, after a quick search for ‘AVIF converter’ I found an online tool where you can upload a jpeg and download the resulting AVIF.

This fared better:

In this example there are enough ‘unimportant’ pixels, the sky, the road, the background, for the AVIF format to make a file size saving.

But in this example, on my first attempt the AVIF file was actually larger (99kb). Tweaking the save settings I managed to get the AVIF smaller but I couldn’t make any further saving than the equivalent WebP. The AVIF did end up smaller than the Jpeg but I think the detail in the grass caused it some trouble (which was exactly why I chose this picture).

There’s a lot more I could say about AVIF, and I could get a lot more technical, but I think as an introduction to the ‘New Kid’ hopefully what you’ve read so far will be helpful. But don’t expect this to be the last you see on the subject.

Conclusion

It looks like the next generation is well and truly here to stay and ready for using. That’s right, there’s no reason to wait and see if this gains momentum or if it’s adopted across all browsers, AVIF is already supported by most modern browsers and big tech names are getting involved in the development and support.

For older browsers, by referencing the AVIF file with a fall back for .jpg or other image format there’s no issues of loss of images for anyone using an unsupported browser.

But ultimately you still need to consider the subject matter of the image, understanding how the various file formats compress the image will help to choose which format is most suitable.

If you’d like to know more about how your website might benefit from a more modern image format, please get in touch.

Get in touch