Description

AV1 Image File Format (AVIF) is an image file format specification for storing images or image sequences compressed with AV1 in the HEIF container format.

Rationale

AVIF is a modern image format based on the AV1 video format. AVIF offers significant compression gains over other image formats like JPEG, WebP, PNG, and GIF. While the exact savings depend on the content, encoding settings, and quality target, Google and Netflix have seen greater than 50% savings vs. JPEG.

Although all major browsers (except for Edge) already support AVIF for still images, animated AVIF is not yet as widely supported. Until all browsers advertising AVIF support also support animations, this poses an interoperability problem where developers cannot rely on the browser to do format selection by using <picture> + <source>. Consider the following HTML, where the developer properly makes use of <picture> to let the browser pick the most appropriate image format to display an animation:

<picture>
  <source srcset="animation.avif" type="image/avif">
  <source srcset="animation.webp" type="image/webp">
  <source srcset="animation.apng" type="image/apng">
  <img src="animation.gif" width="420" height="420" alt="…">
</picture>

• In browsers with animated AVIF support, and browsers without AVIF support, this renders an animation. ✅
• In browsers that advertise AVIF support without supporting animations, it renders a still image. ❌

Any web pages using this pattern are broken in current versions of Firefox and Safari for iOS.

Specification

https://aomediacodec.github.io/av1-avif/

Tests

WPT covers animated AVIF in the ImageDecoder tests:
https://wpt.fyi/results/webcodecs/image-decoder.https.any.html?label=experimental&label=master&aligned (Subtests: “Test multi-track AVIF image decoding”)

https://wpt.fyi/results/avif?label=experimental&label=master&aligned&view=subtest (added in web-platform-tests/wpt#36044) tests animated AVIF support without the ImageDecoder dependency.