I’ve found animated GIFs to be useful both on my blog and in README files. There are many ways to create them, but most suffer from issues with cropping and resulting file size. I’ve found some great solutions, though, and I want to share them with people who currently create GIFs and those who might find GIFs useful for their own needs.

Recording

You can record GIFs directly from the screen with some simple (and mostly free) apps. The best I’ve found have been Capture GIF and the free app Licecap. Licecap is perfect for most of my needs.

You can also record terminal sessions using ttyrec, as detailed on TuxDiary. Another option is ttystudio, which I haven’t tested, but it looks very effective.

Another option for GIF creation is to record it as video and convert it to GIF after editing. This can be a lot less of a headache for things that aren’t necessarily reproducible in sequence on the screen as the editing process is simpler. QuickTime Player (bundled with OS X) can do screen recording, but I prefer using ScreenFlow as its editing tools are excellent.

Converting/editing

Converting video to GIF can be done from either the command line or a GUI application.

On the command line, gifify offers excellent tools for converting QuickTime format to GIF with options for controlling frame rate and speed.

There are two apps I’ve found that work well as GUI applications, my favorite being PicGIF ($4.99US). GIF Brewery (also $4.99US) is also a solid choice.

Optimization

Even with apps that offer optimization in export, you can still end up with larger-than-necessary images. Especially with Terminal recordings, you really only need 16 colors and just high enough a frame rate to appear smooth. The absolute best solution I’ve found is a terminal utility called gifsicle (available through Homebrew and GitHub).

A simple command for converting a screen recording that will reduce Licecap output by more than 50%:

gifsicle --colors 128 -O3 -o ~/Desktop/mathjax-validator-sm.gif ~/Desktop/mathjax-validator.gif

Resizing

Resizing and cropping can be handled in both PicGIF and GIF Brewery, but ImageMagick can make it easy to script. The convert utility can be used like this:

$ convert do.gif -coalesce temporary.gif
$ convert -size 800x600 temporary.gif -resize 500x375 smaller.gif

Compression

Gifsicle does a great job with compression. For a GUI interface with good drag and drop support, ImageOptim handles animated GIFs well. You can include ImageOptim in a script with a simple open -a ImageOptim my_animated.gif

Tutorials

There’s an article on OpenSourceHacker detailing tips for using QuickTime Player and ImageOptim.

Jon Skinner, author of Sublime Text, also has an article detailing “the hard way,” which allows scripting and automation.

I hope that’s useful information. If you have your own solutions, please share them in the comments!