Strange how the web is again exploding with animated GIFs. The trendy moving graphics that were once super cool are making an unexpected resurgence — perhaps thanks to the popularity of image-based social networks like Reddit and imgur.

Let’s indulge in some nostalgia for a moment. Check out Geo from Bootswatch, a retro Bootstrap theme that includes a full suite of memorable animated GIFs such as MC Hammer and Cool Spot.

Can't touch this!
Make 7, Up Yours!

Memory lane is all warm and fuzzy, but modern times call for new GIFs. With all the tools available these days, you can easily roll your own. This article explains how to do that on a Mac. Windows users are S.O.L. as usual.

Install the Prerequisites

Most people use Homebrew as their OS X package manager. If you haven’t installed it yet, visit brew.sh and follow the installation instructions.

Next, install ffmpeg to convert videos to animated GIFs:

$ brew install ffmpeg

Also install Gifsicle, a command-line program that optimizes and manipulates animated GIFs:

$ brew install gifsicle

Get a Video

I’ve created a sample video called sample-screen-recording.m4v using QuickTime’s screen recording feature. If you’re interested, learn how to do that on Apple’s QuickTime Player 10.x: Record your computer’s screen support page. You can also use an iPhone video — or pretty much any video you want — since we’ll be using ffmpeg to convert it to a GIF.

Even though it’s free, ffmpeg is production-grade video transcoding software. For example, we use it at work to convert ABC iview source videos into streamable renditions. How about that for tax savings, Australia?

Convert the Video

The command to create an animated GIF from the sample video is:

$ ffmpeg -i sample-screen-recording.m4v -r 10 -f gif - | gifsicle --optimize=3 --delay=10 > sample-screen-recording.gif

The result is the following GIF:

Sample Screen Recording
Sample screen recording.

You could probably spend four years at an academic institution learning the ins and outs of ffmpeg. Here are the essential flags for now:

Flag Description
-i filename.ext The input file given to ffmpeg.
-r 10 Forces the frame rate to 10 frames per second. Animated GIFs would be enormous if we used every frame from the source.
-f gif Sets the output format to GIF.

Next, the GIF is piped to gifsicle, which is invoked with the following options:

Flag Description
--optimize=3 Optimises the output file size.
--delay=10 Sets the delay between frames, in hundredths of a second.
> sample-screen-recording.gif Bash redirect to write the new GIF to disk.

Both gifsicle and ffmpeg can scale and crop GIFs. Don’t be afraid to read the man pages for both to manipulate your GIFs further.