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!
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 http://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 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:
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.