GIF Screencast using FFMPEG and Gifsicle

If you write technical documentation or tutorials, sometimes a short GIF is more practical than a full video. It is easier to embed, quicker to preview, and helps readers follow UI interactions without leaving the page.

Making one is actually very simple. This is how you create GIF screencasts using ffmpeg on Xorg (wayland guys have to find their own equivalent. I bet it's as simple).

FFmpeg is a very powerful video converter. One of its useful features is the ability to capture input directly from your screen, which makes it possible to create screencasts and convert them into GIF format afterward.

Here is an example:

The gif is made with fairly short shell script:

#!/bin/sh

giftmp=/tmp/outXXXXXXXXXX.gif

unset x y w h
eval $(xwininfo |
sed -n \
    -e "s/^ \+Absolute upper-left X: \+\([0-9]\+\).*/x=\1/p" \
    -e "s/^ \+Absolute upper-left Y: \+\([0-9]\+\).*/y=\1/p" \
    -e "s/^ \+Width: \+\([0-9]\+\).*/w=\1/p" \
    -e "s/^ \+Height: \+\([0-9]\+\).*/h=\1/p" )

ffmpeg \
    -f x11grab \
    -v warning \
    -s "$w"x"$h" \
    -i :0.0+"$x","$y" \
    -r 10 -y $giftmp
gifsicle --optimize=3 $giftmp > ~/Pictures/Gifs/"$1".gif

The script above requires xwininfo to determine the target window coordinates, and gifsicle for GIF optimization.

On Wayland, tools like xwininfo usually do not work. You can use alternatives such as slurp to select screen regions and wf-recorder for screen recording instead. I suggest using gifsicle for GIF optimization because it is display server independent. Make sure the required packages are installed on your Linux distribution before running it.

Have fun experimenting with it.

Originally, this article was written at 25 Dec 2015 for my personal blog in Indonesian