AVIF Animation

What Is AVIF?

AVIF (AV1 Image File Format) is a modern, open, royalty-free image format developed by the Alliance for Open Media (AOMedia). It is based on the AV1 video codec and uses the HEIF container format (ISO/IEC 23008-12). AVIF supports lossy and lossless compression, alpha transparency, HDR with 10-bit and 12-bit color depth, wide color gamut, and — crucially — animation.

Compared to older formats like JPEG and PNG, AVIF achieves dramatically better compression ratios at similar visual quality. At low to medium bitrates, AVIF typically produces files 50% smaller than JPEG and 20–30% smaller than WebP, while maintaining perceptually equivalent or superior image quality.

Animated AVIF Explained

Animated AVIF works by storing multiple image frames within a single AVIF file, using the HEIF sequence structure. Each frame is compressed independently using AV1 intra-frame coding, which gives animated AVIF a massive quality-per-byte advantage over GIF and animated WebP.

Animated AVIF files typically use the .avif extension (same as still images) and the image/avif MIME type. Some tools and systems may use the .avifs extension to distinguish animated files from still images, but this is not standardized and most browsers handle both with the same .avif extension.

Key advantages over GIF and animated WebP:

• Much smaller file sizes — AV1 compression is generations ahead of GIF's LZW and substantially better than WebP's VP8 codec.
• Full color support — Unlike GIF's 256-color palette, animated AVIF supports millions of colors with 8, 10, or 12-bit depth.
• Alpha transparency — Smooth, full-range transparency without the dithered edges of GIF.
• HDR and wide gamut — Supports high dynamic range content and wide color gamuts like Display P3 and BT.2020.
• Configurable quality — Lossy compression with fine-grained quality control, so you can optimize for size or fidelity.

Browser Support for Animated AVIF

Still AVIF images now enjoy near-universal browser support. Animated AVIF support is also widespread, though Safari was the last major holdout. Here's the current state:

For the most up-to-date compatibility data, check caniuse.com/avif.

Software Support

Beyond browsers, many desktop applications and image processing libraries now support AVIF, including animated AVIF to varying degrees.

Image Editors

Command-Line Tools

Operating System Support

Windows 11 includes native AVIF support through the AV1 Video Extension from the Microsoft Store, allowing AVIF files to be viewed in Photos, File Explorer thumbnails, and other system apps. Windows 10 can add support by installing the same extension. macOS gained native AVIF support in macOS Ventura (13.0+). Linux desktop environments support AVIF through libraries like libavif and libheif — most modern file managers, image viewers (Eye of GNOME, Gwenview), and thumbnailers handle AVIF natively.

Online Tools for Animated AVIF

If you don't want to install software, several online tools can create and convert animated AVIF files directly in your browser or on the server side:

Working with Animated AVIF in Practice

Using animated AVIF on the web is straightforward. Simply use an <img> tag just like you would for any other image:

<img src="animation.avif" alt="My animated AVIF">

For progressive enhancement with fallback for older browsers, use the <picture> element:

<picture>
  <source srcset="animation.avif" type="image/avif">
  <source srcset="animation.webp" type="image/webp">
  <img src="animation.gif" alt="My animation">
</picture>

This approach ensures that browsers will use the best format they support — AVIF first, then WebP, and GIF as the universal fallback.

Creating animated AVIF with ImageMagick

If you have ImageMagick 7.1+ installed with AVIF support, you can create animated AVIF files from the command line:

# Convert a GIF to animated AVIF
magick input.gif -quality 60 output.avif

# Create animated AVIF from individual frames
magick frame_*.png -delay 10 -loop 0 animation.avif

# Convert animated WebP to AVIF
magick input.webp -quality 50 output.avif

Creating animated AVIF with avifenc

The avifenc tool from libavif provides more control:

# Encode frames into animated AVIF (each frame gets 250ms display time)
avifenc --min 20 --max 40 --speed 6 \
  frame01.png frame02.png frame03.png \
  -o animation.avif

AVIF Animation vs. Other Formats

Tips and Best Practices

• Use progressive enhancement — Always provide WebP or GIF fallbacks using the <picture> element for maximum compatibility.
• Optimize quality settings — For most animations, a quality setting of 40–60 provides an excellent balance of visual quality and file size savings.
• Keep dimensions reasonable — AVIF encoding is CPU-intensive. Very large animated AVIF files can be slow to encode and decode. Keep dimensions under 1000px for animations when possible.
• Test on target browsers — While support is now widespread, always verify your animated AVIF files render correctly in your target browsers, especially Safari.
• Consider encoding speed — AVIF encoding is slower than GIF or WebP. For real-time or bulk workflows, consider using faster speed presets at the cost of slightly larger files.
• Use the right tool for the job — For quick one-off conversions, online tools like EZ AVIF or ezgif.com are convenient. For automation and batch processing, use ImageMagick or avifenc in scripts.

Useful Resources

• AVIF Specification — AV1 Image File Format (AVIF) specification by AOMedia.
• libavif on GitHub — github.com/AOMediaCodec/libavif — reference encoder/decoder library.
• Can I Use: AVIF — caniuse.com/avif — always up-to-date browser support data.
• ImageMagick AVIF Docs — imagemagick.org/script/formats.php — format support reference.
• Ezgif AVIF Tools — ezgif.com — online animated AVIF conversion and editing.
• Web.dev AVIF Guide — web.dev — Google's guide on using next-gen image formats.