Modern gif replacement: Animated AVIF bugs and performance issues

[o-t-w]

Description

Animated AVIF should stand as the modern solution for animated gifs. Unfortunately, implementation in Safari is bug-ridden in general, and all browsers exhibit performance issues around transparency.

• Chrome bug
• Firefox bug
• Safari bug

Some argue that video is a superior solution for this use case, however, AV1, the most modern video codec, does not support transparency. When using older video codecs, cross-browser differences mean there is no straightforward solution to transparent video on the web. Safari supports VP9, but it does not support VP9 with transparency (bug report). Developers need to export the same video twice: once using the HEVC codec and again using the VP9 codec. VP9 is roughly double the size of AVIF. Animated AVIF, by contrast, does support transparency. <img> has the benefit of alt text and the lazy loading attribute.

Despite being utterly outdated, .gif files remain popular. According to the Web Almanac, in 2024 gif made up almost 17% of all image requests on the web. Usage of .gif actually increased in 2024:

Most surprisingly, the oldest and least efficient format of them all, GIF, picked up a percentage point, too.

Developers may not be asking specifically for animated AVIF en masse, but that's an awareness problem. There is clearly a high need for an animated image format and AVIF is increasingly popular.

I think part of the reason for the continued popularity of .gif is that the modern alternative is not entirely clear, but that alternative should be animated AVIF. Probably the best option right now is animated WebP but that tends to have larger file sizes than AVIF. Animated JPEG-XL could also potentially be another option, but the implementation of JPEG-XL in Safari does not support animation (even though the spec for JPEG-XL does include animation). The implementation of JPEG-XL in Chrome Canary (behind a flag) suffers from a bad frame rate. Here's the perspective of Jon Sneyers, who worked on the JPEG-XL spec:

Specification

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

web-feature

No response

Test Links

No response

Additional Signals

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature AVIF

• ID: avif
• Name: AVIF
• Description: AVIF (AV1 Image File Format) is an image format based on the AV1 video format.
• Baseline status: Newly Available
• Chrome use counter: chromestatus.com
• WPT tests: wpt.fyi/results/?q=feature:avif
• More information: See the web-features explorer

[svgeesus]

I'm seeing only one WPT for AVIF. Surely this needs a more full-fleshed-out testsuite, for Interop?

[o-t-w]

Would it make sense to change it to an Investigation Effort rather than a Focus Area?

[svgeesus]

It would also make sense to loop in major AVIF format contributors like @cconcolato @leo-barnes to help write, or port existing tests to WPT.

[leo-barnes]

It would also make sense to loop in major AVIF format contributors like @cconcolato @leo-barnes to help write, or port existing tests to WPT.

For web stuff you're much better off with @yguyon and @wantehchang. :)

[wantehchang]

@vigneshvg Vignesh: Please take a look. Thanks!