Skip to main content

Is there a viable animated GIF alternative yet or what?

By Tyler Sticka

Published on May 31st, 2023

Topics
A dinosaur named ”GIF” stands tall

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:

Rick Astley’s ”Never Gonna Give You Up” dance with Jason Grigsby’s head pasted on top
If this isn’t worth half a megabyte of your data plan, I don’t know what is.

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:

AVIF or WebP (depending on your browser)
WebM or MP4 (depending on your browser)
Comparison of image format file size savings
FormatSizeSavings
WebM/VP9 (Video)24 KB94.6%
AVIF (Image)35 KB92.1%
MP4/H.264 (Video)63 KB85.9%
WebP (Image)136 KB69.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.

Comments

Jay Oram said:

In your testing did you come across apng (animated png) support and if this was a viable alternative to a GIF? Was this left out for another reason?

Reply to Jay Oram

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.

Replies to Jay Oram

Tyler Sticka (Article Author ) replied:

I did! I mention it just before the format comparison (“sorry, animated PNG”). The main issue I ran into was inconsistency in generated file size.

There’s a frequently cited format comparison that shows substantial savings in APNG compared to GIF and WebP. On the other hand, Cory Dowdy went extremely in depth and found comparatively modest benefits in some specific scenarios. In my personal testing, every APNG I generated was larger than the source GIF.

It’s possible that the libraries I was able to install via Homebrew aren’t as efficient as those referenced in the aforementioned articles. I tried using gif2apng and apngopt directly, but I wasn’t able to get them working in a reasonable amount of time. I also tried running the larger APNG I generated through general image compression tools, but they would always break the animation.

Browser support for APNG is on par with WebP, so if you can generate smaller APNG files, you should definitely consider it. But I couldn’t justify including it in the comparison when I wasn’t able to reproduce those benefits, especially when WebM, MP4 and AVIF already run circles around it.

K0RR said:

I’m sorry but this comparison is so flawed it shouldn’t be taken seriously.

You are only comparing one file across formats. You made no mention about what codec you used for MP4 and WebM containers (h.264, h.265, vp8, vp8, av1). What settings were used for converting (FPS, CRF, CQ)?

For honest comparison the files should be created from the source images, not converted from the gif file.

There is also another interesting file format – MNG – although completely unsupported by browsers

Reply to K0RR

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.

Replies to K0RR

Tyler Sticka (Article Author ) replied:

My intention was to follow the recommendations of some high-profile articles suggesting video or image formats to provide an informal overall comparison. I’d encourage anyone out there with a deeper knowledge of video codecs and compression to author a more comprehensive overview, especially if it changes the outcome.

The MP4 and WebM containers were generated using the commands shared here. H.264 and VP9 are used, presumably because they are well supported. I agree that the codec information is useful, so I’ve updated my comparison table to include it.

For honest comparison the files should be created from the source images, not converted from the gif file.

I’d love to read an article where someone compares converting from a GIF to converting from a video to assembling individual frames per format. I assume the quality would be better, but would it change which formats outperform others? That’d be really interesting.

There is also another interesting file format – MNG – although completely unsupported by browsers

It would be odd to exclude JPEG-XL for poor browser support but to include MNG which, as you mention, has no support and no planned support. I didn’t include AV1, BPG, FLIF/FUIF/PIK, HEIF/ISO, HEVC/H.265, JPEG 2000 or Ogg/Theora for similar reasons.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.