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
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
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.
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
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
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.