How to capture GIF for README (on budget)

how-to-capture-gif-for-readme-on-budget.md

How to capture a GIF for README (on budget)

Step 0: install ffmpeg

Step 1: somehow record a video or a screencast

Step 2: trim the video to required length (optional)

# hh - hours, mm - minutes, ss - seconds, ff - frames

# trim from a timestamp (-ss) to another one (-to)
ffmpeg -i path/to/input -ss hh:mm:ss.ff -to hh:mm:ss.ff path/to/output

# trim from a timestamp (-ss) with specified length (-t)
ffmpeg -i path/to/input -ss hh:mm:ss.ff -t hh:mm:ss.ff path/to/output

Step 3: crop the video to required size (optional)

# 1. get the first frame for reference
ffmpeg -i path/to/input -ss 00:00:00 -vframes 1 path/to/frame
# 2. get crop dimensions from the first frame
# 3. crop, resize (you can set 'width' or 'height' to -2 to automatically compute it preserving aspect ratio) and speed up the video (bigger speed_factor means faster playback speed)
ffmpeg -i path/to/input -vf "setpts=PTS/speed_factor,crop=crop_width:crop_height:crop_x:crop_y, scale=width:height:flags=lanczos" path/to/output

Step 4: convert to a GIF

# 1. generate palette for GIF with 256 colors (it has to be a PNG image!)
ffmpeg -i path/to/input -vf "palettegen" path/to/palette.png
# 2. generate GIF
ffmpeg -i path/to/input -i path/to/palette.png -filter_complex "paletteuse" path/to/gif

Step 5: add the GIF to README

![Demo](path/to/gif)