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.
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:
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.