The New AVIF Image Format — A Blessing in Disguise for Website Owners and End-Users

Jon Arne S.
ImageEngine
Published in
4 min readNov 18, 2020

The new AVIF image format is the latest offering in the field of web design. Let me elucidate how this ingenious image format can become a blessing for website owners and end-users with the support from an image CDN.

I see the internet as a Pandora’s box that consists of a variety of audio-visual content. There exists a material fit for everyone’s preferences on the web. Until now, our technological era witnessed the dominance of formats like JPG and PNG. But with the arrival of AVIF, the scenario might change very soon.

This write-up particularly focuses on the advent of the new AVIF image format and its quest to be the next big thing in the universe of image compression.

Formats like WebP were introduced sometime ago to replace JPG and PNG. However, the new lightweight AVIF image format is starting to give a tough competition to the ruling image formats.

In the subsequent sections, I explain what AVIF is, how it is better than other formats, its pros and cons, and finally, how an image CDN comes to its rescue.

What is the New AVIF Image Format?

AVIF’ is an image format that compresses the images while giving out the same image quality. It is a better alternative to traditional formats like WebP, JPEG or PNG.

It uses the same HEIF container as in iOS’s camera that uses HEIC format. Moreover, at full resolution, AVIF supports 10 and 12 bit color compared to WebP that only has 8 bit color depth.

When displaying an image, AVIF takes the least amount of bits/pixel compared to other image formats. Here is a graph from Netflix comparison blog to corroborate the above statement:

(Source: https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4)

Moreover, as per CTRL, AVIF can compress images to 50% of the size compared to JPG and still maintain better image quality.

(Source: https://www.ctrl.blog/media/image/images-webp-avif-vs-jpeg.png)

AVIF’s Multi-Faceted Benefits

For Website Owners

  • Popularity of AVIFs image support is increasing in browsers. Firefox has already started work to add this image format.
  • The AVIF has greater compression efficiency than its contemporaries, so you can build websites with images that load faster.
  • The AVIF format can work well with fluctuating data connectivity therefore, even with slow mobile connections such as the 2G, it gives impressive results.
  • Google, Netflix, Microsoft, Amazon, and other major players have strong backing for AVIF image format.

For End Users

  • Consumers get the benefit of high-quality images with faster load time and less data consumption.
  • Downloading visual content with an unstable internet connection or even lesser bandwidth would be possible.

Drawbacks

  • The decoding speed of AVIF is slower than its counterparts.
  • The only browser that supports AVIF is Chrome which means if the website owner uses an AVIF image then only users on chrome can see it.

This is where you can take advantage of ImageEngine. If the web-browser supports AVIF, then ImageEngine would automatically convert it into AVIF or else it gets converted to other supported formats like JPEG or WebP.

Image CDN

An Image CDN is a global network of cloud-based servers that tailors the image as per the user’s device, at the same time decreasing the image payload.

If you want to make the optimum use of AVIF image format, then an image CDN is the best option to consider.

The image CDN can evaluate the requesting device to see if it is a good candidate for AVIF. If it is, then it will automatically cover and deliver an AVIF image. If not, the image CDN will select the most efficient file format alternative.

The latency of an image transmission can be reduced dramatically by using an image CDN, such as ImageEngine. This makes it easier to deliver the photos even quicker across the web.

Compared to the traditional CDNs, an image CDN does not require many Points of Presence (POPs) all over the globe. It is a cheaper method of delivering high quality images to the users with the help of cloud-based servers.

A traditional CDN sends the same original size images to every device. Whereas an image CDN converts the original images to dynamic content and can optimize it in various ways.

Of image CDNs, ImageEngine’s prowess to automatically convert any format to AVIF is what makes it different from other traditional CDNs. This is done only for the browsers that support AVIF (real time). Therefore, if you plan to use AVIF format, ImageEngine is one of the best options for optimum results.

Use a Image CDN for best AVIF Results

We have already learned that AVIF is yet to replace JPG format as it still requires support from many browsers.

AVIF is a very promising image format and might soon be very popular. But on account of limited browser support, you wouldn’t want your website to display empty sections or error-codes on such browsers.

Using an image CDN like ImageEngine provides a solution to this dilemma. It automatically checks the user’s device image quality capabilities and then optimizes your website’s images with the best alternative.

As a result, image CDNs like ImageEngine can help you to reduce the image payload by almost 80%.

Soon AVIF may outrun the good old JPEG but the good news is that you can immediately start using it with the help of Image CDN.

--

--

Jon Arne S.
ImageEngine

Making the web mobile ✩Entrepreneur ✩ VP at @ScientiaMobile ✩ Tweets about mobile ✩ Techie ✩ Mantra: Do it different and do it well!