I’m Paul Herron and I’m a web developer. I build online applications
with tools like CakePHP and jQuery.

Converting videos to animated GIFs with Giffer

by Paul Herron on 23 February 2014

A common situation for me is taking a small screen recording with Screen Flow on my Mac and then converting it into an animated GIF. A one-second animation can convey an awful lot of information at a glance and saves writing a big paragraph to explain how something works. On the README file of a jQuery script I made recently, for example, a brief animated GIF shows at a glance what the plugin is about:

Demo GIF

I'd been struggling for a while to find an easy way to do this conversion. The obvious approach was to just use ffmpeg but I could never get the quality to be anything better than dreadful. After some hunting around it became apparent that a good approach would be to first convert the video to still frames in PNG format, then process those still frames into the finished GIF using the ImageMagick convert tool. For a while I just ran the commands individually, but soon realised it would be worthwhile to package this up into something a little neater.

With that in mind, last week I published a script on GitHub to make that process as easy as possible.

The script is all about simplicity – its main aim is just to let you type giffer on the command line to quickly convert video to give format. There are some additional options though: things like setting a frame rate, specifying a convert method (optimize or optimizeplus), and specifying the input and output files.

I'm using this as a chance to learn a little more about Bash scripting – things I've never done before like outputting usage information, parsing options, checking exit statuses, etc. I've got a few improvements in mind, so I'll keep adding to the script over the coming weeks!

Giffer on GitHub

Back to homepage

Next: