Making Animated GIFs of Code

This is my process for creating animated GIFs of coding examples, like the one below. It’s changed over time and is my assimilation of posts from InVision and Wes Bos on the subject. You should read those. Wes made a nice video where he walks through his process. Know up front that I’m focusing on quality first, minimizing file size second, and workflow speed last. I’m also use ScreenFlow and the Gifify NPM module. Gifify might take a little time to get up and running, but the list of requirements is clear.1

operator-mono-powerline

Capture

I capture and edit in ScreenFlow. The editing is important. This is where you can remove typos and “dead air,” speed things up or slow things down, and generally get your clip polished to your taste. Previously I did this in Photoshop’s animation palette, which, in hindsight, was just plain insanity. Learn from my mistakes and use ScreenFlow’s editing tools.

Export

screenflow-export-losslessUsing ScreenFlow, I export as Lossless. Yes, lossless. This is key as it gives you the highest quality video to convert to an animated GIF. Exporting to some kind of compressed video format will introduce artifacts that can not only make your final GIF look worse, they could make the final file size larger. Going lossless also gives you a huge file: 158MB for 19 seconds of video! Final note: I export the recording of my Retina screen at 1× rather than scaling it down to 0.5× so that I end up with the nicest looking GIF possible. Converting beautiful, high-res text to nasty, low-res text makes me sad.

Conversion

Finally, use gifify to convert the MOV to a GIF. These are the settings I used:

$ gifify --colors 255 --compress 0 --fps 30 -o operator-mono-powerline.gif operator-mono-powerline.mov

Max colors. No compression. High frame rate.

Are those settings a little aggressive? Nope. The final product is a whopping 70KB. Surely I could squash that down some more, but this resulted in a final product that’s big and beautiful and certainly lightweight enough, IMHO2.


  1. I’m assuming you’re comfortable with the command line since you’re reading about how to make an animated GIF of code. If you don’t know what Homebrew or NPM are, this might not be the workflow for you. 
  2. The conversion did take a while on a 2013 quad-core MacBook. Maybe a minute. Long enough that I was concerned that something was wrong. It just took some horsepower to squash 158MB of video down to a 70KB GIF and, frankly, Gifify doesn’t do a good job of using all available CPU cores.