Strange how the web is again exploding with animated gifs! The trendy moving graphics that were once super cool are making an unexpected resurgence on the web, perhaps due to the popularity of image-based social networks such as Reddit and imgur.

Let us indulge in nostalgia for a moment. Checkout 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 to us 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 yet, please visit 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 output it into 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’s 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 of this command 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 framerate to 10 frames per second. Animated gifs would be enormous in filesize if we used all the frames from the source
-f gif Set the output format to gif

Next, the gif is piped to Gifsicle, which gets launched with the following options:

Flag Description
--optimize=3 Optimises output size of the image
--delay=10 Set the delay between frames to time in hundredths of a second
> sample-screen-recording.gif Bash redirect command to output the new gif.

Both gifsicle and ffmpeg are capable of scaling and cropping gifs. Don’t be afraid to read the man pages for both to manipulate your gifs.