Engineering

AVIF - the next-gen image format you need to know about

webdev, performance, image, avif

What is AVIF?

The abbreviation "AVIF" stands for "AV1 Image File Format" and is essentially the specification for storing still and animated images compressed with AV1 in the HEIF file format. AV1 is the royalty-free video coding format that has most tech experts believing it is the next step in media compression.

A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG, and GIF and is designed to supersede them (I’ll cover it later in detail). It's an image file format spec for storing images or image sequences compressed with AV1 in the HEIF file format. It competes with HEIC which uses the same container format, built upon ISOBMFF, but HEVC for compression. Version 1.0.0 of the AVIF specification was finalized in February 2019.

Big tech companies are testing AVIF in scale

On 14 December 2018 Netflix published the first .avif sample images, and support was added in VLC. Microsoft announced support with the Windows 10 "19H1" preview release, including support in File Explorer, Paint, and multiple APIs, together with sample images. Paint.net added support for opening AVIF files in September 2019, and the ability to save AVIF format images in an August 2020 update. The Colorist format conversion and Darktable RAW image data have each released support for and provide reference implementations of libavif, and a GIMP plugin implementation has been developed supporting both 3.x and 2.10.x plugin APIs.

The case of Netflix

Netflix describes their need for an alternative to JPEG that:

  1. is widely supported
  2. has better compression efficiency
  3. has a wider feature set. > “We believe the AV1 Image File Format (AVIF) has the potential. Using the framework we have open-sourced, AVIF compression efficiency can be seen at work and compared against a whole range of image codecs that came before it.“

The full story by Netflix with tons of visual examples and comparisons: https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

Supported features

  • High dynamic range (HDR)
  • 8, 10, 12-bit color depth
  • Lossless compression and lossy compression
  • Monochrome (alpha/depth) or multi-components
  • Any color-space including wide color gamut, ISO/IEC CICP, and ICC profiles
  • 4:2:0, 4:2:2, 4:4:4 chroma subsampling
  • Film grain

Graphics examples and comparisons:

AVIF vs WebP

Overall there was a lot of debate around this topic over the past year. When looking at tests from last year it seems that WebP was still better performing compared to any other format. However, this year following some optimizations that were made looks like WebP might stay behind.

Although I don’t think WebP will disappear anytime soon, it might be a good idea to start learning about using AVIF. The big players like Netflix, Google, and Microsoft are already in implementation phases for some of their services. That makes me believe that we will be able to see AVIF out there in the wild more throughout 2020 and 2021.

For further technical comparison check out this post.

Supported browsers:

AVIF support in web browsers is in development. In August 2020, Google Chrome version 85 was released with full AVIF support. Mozilla is working on support for the image format in Firefox.

Full review of the browsers and specific versions that already support AVIF: https://caniuse.com/avif

Try it yourself

A great way to stay up to date as a developer

We spent a lot of time searching and consuming the latest dev news. It is inevitable, that’s why we built daily.dev. It provides all the dev news in your new tab and saves tons of time. It’s open-source and helping a huge community of developers around the world to stay in touch with the latest news.

Featured Posts

Stop searching for dev news

Stay up to date every new tab.

If you are busy or lazy it's ok, try our weekly recap and we'll save your time

Thank you for subscribing!
Oops! Something went wrong while submitting the form.