Better looking, faster loading images with AVIF

Popular file formats JPEG and PNG have been around for decades and despite their convenience and ubiquity they are beginning to show their age in comparison to a number of modern alternatives. I have spent time looking into one format that has designs on replacing both JPEG and PNG as the dominant image format of the future.

Freshly squeezed

The AV1 Image File Format or AVIF is a modern solution for handing images online. Amongst other things, it promises superior compression efficiency and better detail preservation and improves on rival formats such as WebP by offering high dynamic range and wide colour gamut support.

I have been experimenting with AVIF images on this site and have been incredibly impressed with both image quality and the output file size. In terms of support, not every web browser is ready yet. Both Chrome and Firefox can display AVIFs, and last week Jen Simmons shared news that Safari will support AVIF images on macOS Ventura and iOS 16.

On this site, I'm implementing AVIF using the HTML <picture> element which allows a page to offer alternative versions of an image depending on the scenario. This means anyone using a device and browser savvy enough to handle the new format will see better quality images that download in less time, while other users will view content encoded in more traditional formats.

So far I have been super-happy with this solution, but AVIF offers another trick that's of particular interest to me.

Skip to the good bit

At the time of writing, it is fair to state that the majority of users currently experience the web in 8-bit colour. Display panels are still predominantly 8-bit and image formats have been optimised around the technology of the day.

An 8-bit colour system is capable of producing over 16 million colours, which has proved sufficient for general use. That being said, any artist who has attempted to display a gradual gradient will know what it is like to hit the limit of 16 million colours - the result is ugly banding artifacts instead of a single continuous gradient. These visible lines appear as technology literally runs out of colours to blend. A 10-bit colour system improves this situation increasing the limit to billions of colours. This doesn't entirely remove banding artifacts, but it reduces them to the point that they are barely visible to most people.

A number of professional displays such as the Pro Display XDR support 10-bit colour and are capable of natively displaying more than one billion colours. At the consumer end, frame rate control can enhance an 8-bit display allowing it to simulate billions of colours. Although not stated specifically, this is likely the solution employed by the new Macbook Air M2 a consumer-level device able to display one billion colours.

When encoding images to AVIF, I've started using the 10-bit colour space. I've seen very little difference in terms of file size, and on capable screens, the images look nicer.

If you have a suitable device, and if you are also using a browser that can display them, the 3D render of a basic sunset above should look better than it does on older hardware. Colour banding, especially in the upper areas of the image should be less noticeable. What the eye cannot see is that the AVIF file is a tiny 5 KB in size, versus the JPEG's 47 KB. The latter could be compressed further to bring the file size down, but that makes the banding artifacts even worse.

I am very excited that cutting-edge technology is enabling artwork to be rendered closer to how artists originally intended.

Frame of reference

In addition to this visual goodness for static images, all of the above applies equally to the next-generation AV1 video codec. I am seeing huge improvements in reduced file size and increased image quality across all the videos I have converted. This is great news not just for users viewing content, but also for content creators who will see reduced bandwidth costs.

On this site I'm using the HTML <video> tag to offer alternative versions depending on available support. In this area Chrome and Firefox already handle AV1 fabulously, sadly Apple and Microsoft have yet to announce plans. It has been spotted that the kCMVideoCodecType_AV1 variable was added to the recently announced iOS 16 API, but it is likely Apple will want to roll out hardware-accelerated functionality before going all-in on AV1.

I have more work to do to re-encode all of the content on this site. I am returning to the 16-bit OpenEXR and 10-bit ProRes master files to produce new AVIF and AV1 versions in order to squeeze the absolute most out of this brilliant new technology.