WebP & AVIF - here to stay

Jonas Hultenius

2023-01-08

image

In the ever-evolving world of the internet, new image formats are constantly being developed to improve the performance and user experience of websites. Or truth to be told, that is how it should be. Jpg and Png still remain the go to formats even though their advanced age.

But there are modern alternatives.

Two such formats that have gained traction over the last couple of years are WebP and AVIF. From an experimental and niched beginning these formats are now firmly here to stay and speed up your website.

WebP is a modern image format (based on the VP8 video format) developed by Google. It offers improved compression over older formats like JPEG and PNG, resulting in smaller file sizes and faster loading times. This can greatly improve the performance of your website, especially for users with slower internet connections or mobile devices. WebP also offers both lossless and lossy compression options, allowing for a balance of image quality and file size, as well as support for animation and alpha transparency.

AVIF is another modern image format that has been developed with the goal of improving the performance of websites. It is based on the AV1 video codec, which is known for its high compression efficiency. AVIF offers even better compression than WebP, resulting in even smaller file sizes and faster loading times. It also supports a wide range of color spaces and bit depths, making it suitable for a wide range of images. It simply is the better of the two alternatives and it’s main competitor is JPEG XL which has similar compression quality and is generally seen as more feature-rich than AVIF but has nonexistent support in any browser.

One of the benefits of WebP and AVIF is that they are both open-source formats and well documented, which means that they can be easily adopted by developers and forged into the new applications. In a prior project I worked on all images where converted automatically to optimize AVIF and WebP in a background process. Freeing up precious time for the developers and editors to just work. Choose what ever image you want and we’ll handle the rest.

They also have native support in modern web browsers, which means that no additional plugin or extension is required for users to view images in these formats.

Well, that’s not entirely true. Today the support for WebP is there for all the major browsers. And since the impatiently awaiting death of IE (long live IE) there are no reasons left not to use it.

Skärmbild_20230119_095055

For the AVIF the results are also good but for some reason Chromium based Edge is found totally lacking.

Skärmbild_20230119_095134

So an open source and highly efficient image format that is supported by other Chromium based browsers is patched out and unsupported when it comes to Microsoft’s latest replacement browser. The concept baffles me. Do better Microsoft!

Another advantage of these image formats is that they can greatly decrease your website’s carbon footprint. I know I wrote about it only some weeks ago but I think it is a really important part that we tend to forget.

A smaller file size is better, for the environment and for the end users perceived performance. Your website will load faster and be more responsive and it will save you money.

Say what? How can file sizes impact my costs? Well simply put the less you use the more there is to save. Today we tend to say that storage is cheap and while being true now that will not be true forever. We are rapidly moving towards the data apocalypse but that is a topic for another day. In short, we are storing too much data, since storage is so cheap that the price of storage has started to increase and availability has started to decline.

So in the future you will be saving money by not having to pay for more storage than you need and paying for extra bandwidth to transfer it both inside and outside your DMZ. And less data transferred and stored results in lower energy use that in turn makes it cheaper and the carbon footprint smaller. We all win!

As the web continues to evolve and the need for faster loading times and better user experience increases, it’s expected that these image formats will become more widely used and I fore one would say that both WebP and AVIF are firmly here to stay.

And, finally for the age of old battle tested veterans like PNG and JPG will join BMP in the retirement home. Thank you for your service.