AVIF - the next-gen image format you need to know about
Tags: webdev, performance, image, avif
Published: 2020-12-02 10:31:07

## 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 has landed](https://jakearchibald.com/2020/avif-has-landed/) by [Jake Archibald](https://twitter.com/jaffathecake)
* [AVIF Image Format – The Next-Gen Compression Codec] (https://www.lambdatest.com/blog/avif-image-format/)

## 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](https://www.ctrl.blog/entry/webp-avif-comparison.html#src=sharebox). 

## 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
* This page gathers some known implementations supporting AVIF, and provides some test files. https://github.com/AOMediaCodec/av1-avif/wiki
* A cool and simple guide on how to use AVIF: https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

<hr/>
_[daily.dev](https://api.daily.dev/get?r=devto) delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future._
[![Daily Poster](https://dev-to-uploads.s3.amazonaws.com/i/b996k4sm4efhietrzups.png)](https://api.daily.dev/get?r=devto)