Animated AVIF

[mathiasbynens]

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 https://github.com/web-platform-tests/wpt/pull/36044) tests animated AVIF support without the ImageDecoder dependency.

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there were 6 mentions of AVIF. They were:

• JPEGXL please! Animated AVIF please. We desperately need better standard image formats, especially on Safari which takes forever.
• avif
• AVIF background-image on MS Edge
• image-set() has terrible supporty making it harder to use AVIF and JPEG XL. Nesting is also sorely needed
• WebP, AVIF image formats
• :has, jpegxl & avif, subgrid

So only one of those was about animated AVIF specifically. This was not enough to make the top list in https://github.com/web-platform-tests/interop/issues/248.

Since the survey was about CSS I don't think much can be made of the small number of responses, but I'm commenting on all proposals where I could find something in the State of CSS 2022 results.

[nairnandu]

Thank you for proposing Animated AVIF for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. This should not be taken as a comment on the technology as a whole.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.

[foolip]

For anyone following this issue, these are the browser engine bugs to follow for animated AVIF support:

• Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1686338
• WebKit: https://bugs.webkit.org/show_bug.cgi?id=248755

@kypflug do you know how to follow support in Edge? I found https://learn.microsoft.com/en-us/answers/questions/809434/avif-format-not-supported-in-microsoft-edge but I don't know if that'll be updated.