AVIF Is the Next-Gen Image Format You Will Hear a Lot More About

Written by imgix | Published 2023/01/20
Tech Story Tags: technology | software-development | image-processing | image-optimization | web-development | web-design | front-end-development | good-company

TLDRThe AVIF Format is the next-gen image format based on the AV1 video encoding format. With AVIF, users have seen file sizes drop by nearly 60% compared to JPEG and 35% compared to WebP, with no loss in quality. It also helps improve page speed and Core Web Vitals. You can automate the file format conversion by using visual media APIs like imgix. via the TL;DR App

The AVIF Format is the next-gen image format based on the AV1 video encoding format. AV1 was created and is developed by the Alliance for Open Media, a consortium formed by Mozilla, Google, Cisco, Netflix, Amazon, and other companies. The main idea behind AVIF is to take advantage of the compression algorithms originally developed for video in an image format. Netflix believes that AVIF has potential for images across its applications because of the superior quality this format provides while keeping the image size low.

All the major browser makers are closely involved, directly or indirectly, in the development and promulgation of AVIF. So why should you care about it?

https://www.youtube.com/watch?v=ouUgppbKvlk&t=169s?embedable=true

AVIF Benefits: Lighter Images Without Sacrificing Quality

It’s an exciting time for image compression. WebP has been gaining momentum as a JPEG replacement, but now, AVIF has arrived, out-compressing WebP in nearly all cases. In fact, the AVIF image format provides greater reduction in file size when compared with JPEG, PNG and WebP formats. The advantage is that the compression algorithms were originally developed for video in an image format. With AVIF, users have seen file sizes drop by nearly 60% compared to JPEG and 35% compared to WebP, with no loss in quality.

In addition, the AVIF file format supports lossy and lossless image formats, as well as transparency. The AVIF image format is an image format that supports any image codec.

AVIF is available today in web browser versions used by a large number of web users:

  • Google Chrome 85 and beyond
  • Mozilla Firefox 86 and beyond
  • Android
  • Safari on iOS 16.0 and beyond

 (For a list of browsers that support AVIF, please see the AVIF section on caniuse.com.)

  • Source: https://caniuse.com/avif*

AVIF In Action

The AVIF format is best suited for images that contain specific details that need to be preserved, for example, gradients, text and graphics in movie posters. Its performance and quality is great when you use compression.

If you are reading on an AVIF-capable browser such as recent versions of Chrome, Firefox, or Android, you should see three images below:

An AVIF image 9KB in size

A WebP image 12KB in size
A JPEG image 16KB in size

The images are comparable in quality, yet the AVIF image achieves significant reductions in file size. By using AVIF for image compression, you can reduce the image file size even further and gain additional benefits:

  • Faster page loading times
  • Better SEO rankings (Search engines like Google reward page loading speed, especially on mobile)
  • Lower bounce rate
  • Improved customer satisfaction
  • Lower bandwidth costs

OneFootball, a German-based football media company, saw page load time accelerated by 26% and first time to interactive time accelerated by 24% after enabling automatic AVIF conversion.

imgix & AVIF

Since making AVIF available at imgix, our users have seen file sizes drop by nearly 60% compared to JPEG and 35% compared to WebP, with no loss in quality. Unsplash, one of our first customers to implement the automatic AVIF format conversion, has seen a 30% decrease in file size.

https://twitter.com/OliverJAsh/status/1441095716227543042?s=20&t=R1kCrCUHCqOCp6XlI-GS9Q?embedable=true

Just like Unsplash, you can automate image format conversion by using imgix. Through the use of the ‘auto=format’ parameter, imgix will automatically serve images in AVIF for all browsers that support it. For browsers that don’t yet support it, the imgix rendering API will fall back to the next-best available format. If auto=format is set and the browser does not support the AVIF format, we'll first fallback to WebP if it is supported. If WebP is not supported, imgix will fall back to the source image type or to any format specified by the fm parameter. Image quality and website performance is great when you use compression within the AVIF format.

Future-Proof Your Images

It can be a cumbersome process to create, manage, and serve different formats of images for different purposes. Copying images into different formats can also incur a huge storage cost over time. Instead of deciding which image format to serve for which environment, or constantly debugging the complex interaction between data and images--imgix does it all for you.

Working with an image optimization partner like imgix that serves the AVIF format means you are future-proofing your images and setting yourself up for success as technology continues to advance. As new standards enter the market, we will constantly evaluate and innovate so you can stay ahead of the curve.


Try this feature free by signing up foran imgix account.

Also published here.


Written by imgix | imgix transforms, optimizes, and delivers your visual media for faster pages, higher engagement, and a simpler workflow.
Published by HackerNoon on 2023/01/20