01. 03. 2024 Charles Callaway Documentation

Turning Videos into Animated GIFs

So how’s your website doing? Did you set it up, and then leave it alone? It’s not that I’m trying to shame you, but we should all be thinking regularly about how to stay at the top of our game. You know, be agile.

I was updating one of our websites last month, and we had a huge animated banner across the top, showing the interface to our software as a user stepped through it. Unfortunately, we released a new version of the software, and now the interface had obviously changed. Time to make a new animated banner!

What Should I Use?

If you’ve never tried to set up an animated banner, your first thought might be to just use a video, and then to think about what kind of video codecs and containers to use: H.264? MP4? Not so fast. Videos are quite heavy (in terms of MB), may not autoplay, and the browser may add visible controls. No, what we need is the seamless integration of animated GIFs.

Animated GIFs have a much lighter footprint: you can compress them easily because you can define your own color palette, including restricted ones with, say, just 128 separate colors. They’re also pretty much treated as the equal of other images. Just make one, add it to your site like you would any other GIF, and then get on to your other work. (Or try to compete with Giphy.)

So that was an easy decision. But… how do we actually do it?

Making an Animated GIF

We make an MP4 video!

I knew you would love that answer. But that’s the plan. Why? Well, there are loads of great tools for making videos with all kinds of complex effects. For instance, we might want to add filters or transparent overlays to give it a sort of background, unfocused look. And there are almost no great native tools for creating animated GIFs unlike your typical video editor. Unless you have a lot of money. But why go that route when you can do everything for free?

So get out your favorite video editor and make an animated movie banner you’d be proud to see at the top of your website. Then let’s get to work converting it into an animated GIF banner.

We’ll use just one (free) tool, that Swiss army knife of video processing called ffmpeg. You may have heard of it before, especially if you’ve used open source tools like Audacity, Gimp or Shotcut, or you do your work on Linux. Did you know ffmpeg can make animated GIFs? It can!

We’ll use a two step process: (1) run ffmpeg on the video to create a reduced color palette (saved to a local file with a name like “palette.png”), and then (2) run ffmpeg using that palette file to create the GIF from the video.

Note that ffmpeg will create deltas of the differences between individual frames rather than using a compression algorithm on the frames themselves (you can see these delta frames if you have a viewer like GIMP that displays animated GIF frames). And we can set the frame rate to less than 24fps, which works especially well for showing software interfaces that have “in-place” motion rather than “moving across the screen” motion.

So if your video has lots of static parts, you’ll get great delta compression. If instead there are large changes between every frame, you may wind up with a GIF that’s just as large as or even larger than your original video, since the GIF format doesn’t use lossy compression techniques like video codecs do.

The Details

Before you start, you should decide on the size of the animated GIF, and set it with the scale parameter. Below I’ve set the width to be 960 because that’s the size of our website’s previous banner, and -1 just tells ffmpeg to set the height to be proportional (keep these values the same across the two commands).

For the frames-per-second argument I tried values in the range 5-15 in order to get the best compression; in my experience you don’t have to worry about high FPS values like you would for videos (see above).

The ffmpeg utility has a lot of parameters, and they’re quite complex, so if you want further information, feel free to look at its documentation. But for now let’s do the first step: creating the palette:

# ffmpeg -v warning -i <input-file>.mp4 -vf "fps=5,scale=960:-1:flags=lanczos,palettegen" -y palette.png

For the second step, making the final GIF, be sure to use the same sizing parameters you used when creating the palette. This command will take both the video and palette as input, and create the final animated GIF:

# ffmpeg -v warning -i <input-file>.mp4 -i palette.png -lavfi "fps=5,scale=960:-1:flags=lanczos [x]; [x][1:v] paletteuse" -y <output-file>.gif

That’s it, your video is now an animated GIF, converted in just 10 seconds or so! Just overwrite the old one on your website, sit back, and enjoy!

Final Note

Making your animated GIF files as small as possible is important, since they will be downloaded from your website frequently. You can make your files smaller by understanding both how the palette and inter-frame delta compression work.

If you can use as few colors in your video as possible, and have as little motion as possible (by designing the interaction favorably, using quick mouse movements, or adding only video effects with minimal size/movement) you can create very small animated GIF files that still look like high quality videos.