close icon
daily.dev platform

Discover more from daily.dev

Personalized news feed, dev communities and search, much better than whatโ€™s out there. Maybe ;)

Start reading - Free forever
Start reading - Free forever
Continue reading >

AVIF the next-gen image format: specs, samples, AVIF vs WebP and the best resources to get started

AVIF the next-gen image format: specs, samples, AVIF vs WebP and the best resources to get started
Author
Nimrod Kramer
Related tags on daily.dev
toc
Table of contents
arrow-down

๐ŸŽฏ

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

Why not level up your reading with

Stay up-to-date with the latest developer news every time you open a new tab.

Read more