Show, don't tell, as an animated GIF

Images are a powerful communication tool

Screencasting is the idea of recording your screen. It can be saved as a video or as an animated image. It can be useful to explain things that are hard to communicate with words.

A good example is my project panicparse, which has a very trivial animation that made wonders to explain what the project is about.

GitHub doesn’t support embedded videos, nor WebM, nor SVG in their markdown, so this post focuses on the lowest common denominator for now: good old animated GIFs.

Recording

For recording, I used LICEcap on macOS and WebMcam on Windows. LICEcap has the disadvantage of recording directly into a GIF, where WebMcam saves individual frames as PNGs so a more optimal palette can be created at the very end of the editing process. You can also just take screenshots yourself with the OS’s screenshot tool or shortcuts:

• macOS: Shift-Command-4 then space bar. A PNG will be saved on the desktop after a few seconds.
• Windows: Alt-PrtScn then paste it in Paint to save manually as a PNG. In practice it’s probably easier to just use the Snipping tool.
• On Linux, Alt-PrtScn tend to work, a PNG is saved in your Pictures directory.

Compressibility

The GIF format is very old and not very efficient at compression. Since it’s limited to 256 colors, here’s a few tricks to improve the file size:

• Disable subpixel font antialiasing (ClearType on Windows) before taking the screen shots. The subpixel antialiasing causes a lot of colored pixels, which makes compression in a 256 color palette inefficient.
• If using a recording tool, record at a low frame rate, 5 fps (frames per second) or lower to make the final frames selection easier.
• Try to limit the final animation to 10 frames or lower.
• Limit the image width, let’s say 800 pixels or lower.
• Avoid recording fade-in/out animations. Record slowly, then discard any frame containing a graphical animation. Semi-transparent layers can’t be compressed efficiently.

Editing

I do the post-editing with GIMP. There are many tutorials on the net. In short, name the image layers “foo (1000 ms)” where the “1000ms” value in the layer label is the duration this frame should be shown.

• If loading a GIF:
  • “Open…” the image. You’ll see many layers.
  • Use Filters / Animation / Unoptimize to recreate all the full frames. This makes editing easier.
• Else if loading individual frames:
  • Open…" the first frame.
  • Use “Open As Layer…” for the remaining frames.
  • It’s easy to reorder frames in the Layers panel.
• Do your edits.
  • Remove mouse cursor or unneeded changes between frames. This will improve the compression ratio.
  • If you add text, disable anti-aliasing.
• If you loaded individual frames:
  • Use Image / Mode / Indexed to use Generate optimum palette with no dithering. Doing this at the very end will result in a better optimized palette.
• Recompress the layers with Filters / Animation / Optimize (for GIF). You’ll see the layers become garbled, as only the difference between frames is kept.
• “Export As…” and manually type the “.gif” extension.
  • Uncheck “GIF comment”.
  • Check “As animation”.

Enjoy!