Is there a viable animated GIF alternative yet or what?

The Graphics Interchange Format (GIF) was released in 1987, which predates the first web browser. They remain the most popular format for short, autoplaying, silent animations in spite of their beefy file size and limited color palette. We’re long overdue for an alternative, which begs the question: What replaces the animated GIF?

Some say video formats are the clear successor, which makes sense… video is, by definition, a sequence of images. But there are some drawbacks:

• Colin Bendell pointed out that browsers don’t preload video, which can impact perceived performance.
• By default, the video experience isn’t very GIF-like: You need a magic combination of autoplay, loop, muted and playsinline attributes to achieve similar behavior.
• The video element exposes more playback control possibilities, which can be good for accessibility, but it lacks an alt attribute for alternative text. (The title and fallback content don’t seem to be exposed to assistive devices in a similar way, but maybe aria-label or aria-labelledby would work?)

Surely the file size savings make up for all that, right?

Sometimes!

I made grigsroll.gif a while ago in loving tribute to our CEO (and resident image performance expert) Jason Grigsby. It’s 448 KB in size:

Now let’s compare to some alternative formats with decent browser support (sorry, JPEG-XL) and better compression (sorry, animated PNG). I created these versions from the command line using gif2webp, ffmpeg and libavif for an honest comparison.

Here are the results:

Comparison of image format file size savings

Format	Size	Savings
WebM/VP9 (Video)	24 KB	94.6%
AVIF (Image)	35 KB	92.1%
MP4/H.264 (Video)	63 KB	85.9%
WebP (Image)	136 KB	69.6%

WebM (a video format) is the smallest, but there’s only partial support in Safari on iOS as of this writing. AVIF (an image format) is close behind, but it isn’t supported in Edge (or natively in content management systems like WordPress).

So sometimes a video is smallest, and sometimes an image is smallest. Most browsers don’t support video in img elements, so you have to choose one or the other. And the worse-case img scenario is significantly larger in file size, but the video version lacks straightforward preloading or alternative text. Good grief!

It depends.

If you can’t change the markup for img elements, then WebP is the only format with universal support. You can plop one into an img element’s src attribute with no other changes and it’ll work just like a GIF in every modern browser:

<img src="clip.webp" alt="…" width="…" height="…">Code language: HTML, XML (xml)

If you can change the markup but you’d like to stick with the img element’s behavior, then a picture element with AVIF and WebP types is the way to go. You can even keep the GIF as a fallback:

<picture>
  <source type="image/avif" srcset="clip.avif"/>
  <source type="image/webp" srcset="clip.webp"/>
  <img src="clip.gif" alt="…" width="…" height="…">
</picture>Code language: HTML, XML (xml)

But if file size is your biggest priority, then a video element with WebM and MP4 sources should generally yield the most savings (with less discrepancy between formats):

<video autoplay loop muted playsinline
  aria-labelledby="video-label"
  width="…" height="…">
  <source type="video/webm" src="clip.webm">
  <source type="video/mp4" src="clip.mp4">
  <!-- image fallback, old habits die hard -->
  <img src="clip.gif" alt="…" width="…" height="…">
</video>
<div id="video-label" aria-hidden="true">
  (alternative text)
</div>Code language: HTML, XML (xml)

You’ll also want to consider how the format you choose fits into your workflow. Can your team generate it? Will your content management system support it? Can you offload the transformation to the server or a third-party service?

There’s significant work to be done if we want designers, developers and content authors to embrace these newer formats.

We need a comparable experience. If we can’t have video sources for img elements, fine, but the video element in its current state won’t cut it. We need a clear means of defining alternative text, we need preloading, we need easy saving and sharing. (Correction: The native video element supports saving in all modern browsers. Hooray!)

We need better compatibility, and not just across browsers. MacOS won’t correctly preview animated AVIF, animated WebP or WebM. Adobe Media Encoder won’t do WebM, WebP or AVIF out of the box. I had to trick WordPress into letting me upload an AVIF file. It’s idealistic to expect a format to immediately leapfrog the GIF’s decades-long head start, but running a third-party plugin or cryptic Terminal command to generate files our environment won’t recognize is a really tough sell.

We need to talk about video and animated image formats in the same breath. Many articles compare video formats to GIF, or image formats to each other, but rarely are all possible formats discussed together. WebP is smaller than GIF, great, but why use that instead of WebM? AVIF is smaller than WebP, sure, but is it also smaller than existing video formats?

My gut says GIFs on the web are like customary units of measurement here in the United States: They’re so thoroughly entrenched that they’ll probably always be around. But just as the metric system slowly crept into our nutritional food labels and soda bottles, there’s opportunity for newer formats to gain a foothold in our process anyway.

Big thanks to my Cloud Four teammates Paul Hebert and Jason Grigsby for the inspiration and technical review. Thanks also to Chris Silverman, Dusty Pomerleau and Callie Riggins for sharing thoughts with me on Mastodon, and to Taylor “Tigt” Hunt for the correction. Apologies to Eric Bailey for leaving out zoetropes.