Animated AVIF

[mathiasbynens]

Which feature do you want to detect?
Support for animated AVIF images, a.k.a. AVIF image sequences.

Which browsers do support this feature?
https://caniuse.com/avif

Although all major browsers support AVIF for still images, only Chrome supports animated AVIF. Per @jensimmons’s tweet, Safari will support animated AVIF in Safari 16.1 (scheduled for release in October 2022).

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>. A JavaScript feature test would help bridge this unfortunate gap.

How could it be implemented?
There’s existing tests for animated image formats:

• Animated PNG: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/img/apng.js
• Animated WebP: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/img/webp-animation.js

I suspect we could follow these examples.

Additional context
A feature test for (static) AVIF support was added in #2539.

[eoyoa]

Hi, I would like to try contributing. Could I be assigned this issue?

[mathiasbynens]

FWIW, I looked into this a while back, and couldn’t find a good way to specifically detect animated AVIF without depending on the ImageDecoder API. The problem is, the ImageDecoder API is itself not supported across browsers yet.

Here’s what I ended up with:

// A hand-made 1×1px two-frame animation: a red frame followed by a green frame.
// Note that AVIF animations always loop indefinitely.
const ANIMATED_AVIF_URL = 'data:image/avif;base64,AAAALGZ0eXBhdmlzAAAAAGF2aXNhdmlmbXNmMWlzbzhtaWYxbWlhZk1BMUEAAAD5bWV0YQAAAAAAAAAvaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAFBpY3R1cmVIYW5kbGVyAAAAAA5waXRtAAAAAAABAAAAHmlsb2MAAAAARAAAAQABAAAAAQAAA7gAAAAkAAAAKGlpbmYAAAAAAAEAAAAaaW5mZQIAAAAAAQAAYXYwMUNvbG9yAAAAAGppcHJwAAAAS2lwY28AAAAUaXNwZQAAAAAAAAACAAAAAgAAABBwaXhpAAAAAAMICAgAAAAMYXYxQ4EgAAAAAAATY29scm5jbHgAAgACAACAAAAAF2lwbWEAAAAAAAAAAQABBAECgwQAAAKLbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAyAAAAAAAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAhd0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAIAAAACAAAAAAGzbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAyAAAABABVxAAAAAAAL2hkbHIAAAAAAAAAAHBpY3QAAAAAAAAAAAAAAABQaWN0dXJlSGFuZGxlcgAAAAFcbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABHHN0YmwAAACcc3RzZAAAAAAAAAABAAAAjGF2MDEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAgACAEgAAABIAAAAAAAAAAEYTGF2YzU5LjQ0LjEwMCBsaWJhb20tYXYxAAAAAAAAAAAY//8AAAAMYXYxQ4EgAAAAAAAKZmllbAEAAAAAEHBhc3AAAAABAAAAAQAAABBjY3N0AAAAAHwAAAAAAAAYc3R0cwAAAAAAAAABAAAAAgAAAgAAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAgAAAAEAAAAcc3RzegAAAAAAAAAAAAAAAgAAACQAAAAbAAAAFHN0Y28AAAAAAAAAAQAAA7gAAABHbWRhdAoLIAAAAAZ//NAQ0AIyFRAAwAAAAoAAAAX172TdcwHjmhthyDIZMAPAgAAABsAAAAKAAACAAB6cDnVHjqg2Jg==';

function supportsStaticAvif() {
  const promise = new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = ANIMATED_AVIF_URL;
  });
  return promise;
}

async function supportsAnimatedAvif() {
  const response = await fetch(ANIMATED_AVIF_URL);
  const bytes = response.body;
  const imageDecoder = new ImageDecoder({
    data: bytes,
    type: 'image/avif',
  });
  const result = await imageDecoder.decode();
  return imageDecoder.tracks.selectedTrack.animated && imageDecoder.tracks.length > 1;
}

[eoyoa]

Apologies, but I am currently unavailable to work on this issue, so I will unassign myself. Thank you for the opportunity regardless.