Creating animated GIFs with ImageMagick

While creating the Happy New Year edition issue of the newsletter, I decided that it might be cool to animate the accompanying image.

Ordinarily, I'd use SVG and CSS for this. I've used both for animation elsewhere on this site. Unfortunately, email support for SVG and CSS is not very good. So instead, I turned to that classic format: the animated GIF.

I've created animated GIFs using Fireworks back when it was owned by Macromedia. I've created them with ffmpeg by exporting frames from video files. But I've never created one “from scratch” by stitching together my own frames.

As it turns out, it's very easy to do. You'll just need a couple of tools: the image editing software of your choice and ImageMagick.

Install ImageMagick

You may already have it ImageMagick installed. Here's how to check:

1. Open a terminal window. MacOS users can use Terminal.app. Ubuntu Linux users, use Ctrl + Alt + T to open one.
2. Type convert at the prompt. If ImageMagick is installed, you'll see a copyright notice and a list of commands. Otherwise you'll see command not found or something similar.

If you do not have ImageMagick installed, install it. On macOS, you can install it with Homebrew.

brew install imagemagick

Or, if you prefer, use MacPorts.

sudo port install imagemagick

Debian/Ubuntu users use the following:

sudo apt install -y imagemagick

The -y flag is optional, and means “Yes.” Passing it will skip the apt confirmation prompt.

Note for Windows users: I haven't used Windows for the better part of this millennium. There are binary downloads of ImageMagick available for Windows. You'll have to figure out how to use them on your own.

Now you're ready to stitch together some image frames.

How to create image frames

Create your image frames using the software of your choice. Each frame should have the same dimensions. I used Sketch to create my images, and used a separate artboard for each frame. For other software packages, such as Acorn, you may need to use separate layers or separate files.

Export each image frame to a bitmap format such as GIF, PNG, or JPEG. Saving them to the same directory makes things easier to manage. I'm using the phrase image frame here because we'll turn them into frames, but they're just separate image files. Which format you use doesn't matter much; ImageMagick will convert them to GIF.

Once you've exported your frames, navigate to the directory where you've saved them. Then run the convert command to stitch your images together. For example:

 convert -delay 100 -loop 5 -dispose previous start.png end.png iamanimating.gif

The -delay flag indicates how many hundreths of a second the GIF should pause before displaying the next frame. In this case, the value is 100, or one second. Animations can cause seizures in some viewers. One second is well above the safety threshhold to avoiding triggering seizures in most cases.

Note: The World Wide Web Consortiums Web Content Accessibility Guidelines say that content should not flash or blink more than three times per second. This works out to a -delay value of 34, or thirty-four hundredths of a second.

The -loop flag indicates how many times the GIF should repeat. A value of 0 (-loop 0) will cause your GIF to loop infinitely. Here, I've chosen to have it repeat five times. Five times is enough to catch the viewer's attention, without being an ongoing distraction on the page.

-dispose, indicates what should happen when the frame changes. In this case, -dispose previous hides the prior frame. Without -dispose previous, you'd end up with the mess in Figure 1.

The next three bits of the command indicate the paths to our input and output files: start.png and end.png. Both files will be stitched together to form IAmAnimating.gif.

You can also pass a wildcard argument — e.g. *.png — for the list of input files. If you do so, be aware that ImageMagick will assemble those images in alphanumeric order. A file named gifframe10.png will be inserted before gifframe2.png.

Even though it's more verbose, I recommend specifying the list of input files in the order you'd like them to appear. You can include a file twice within the list if you'd like it to appear more than once in the animation.

ImageMagick is far more powerful than what I've covered here. It's also very well documented. Be sure to read the documentation Animation Basics documentation, and the section on how to optimize your animated images.