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 it would be used. 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 thus 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 like to add transparent overlays to give it a sort of background, unfocused look. And there are almost no corresponding native tools for creating animated GIFs. Unless you have a lot of money. But why go that route when you can have it all for free?

So get out your favorite free video editor and make the kind of animated banner you’d be proud to see at the top of your website. Then let’s get to work converting it into an animated 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 file called “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, 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 compression. If instead there are large changes between every frame, you may wind up with a GIF that’s just as large as your original video.

The Details

Before you start, you should decide on the size of the animated GIF, using 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 create do the first step: creating the palette:

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

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