GIFs remain the universal animated image format. Discord, Slack, GitHub READMEs, documentation sites, bug reports -- everywhere that video feels too heavy and a static image is not enough, GIFs fill the gap. But creating them usually involves either screen recording software with imprecise trim controls or Photoshop's timeline editor, which is overkill for most use cases.
I want to walk through how GIFs actually work at a technical level and the fastest ways to create them for developer workflows.
How GIF encoding works
GIF uses LZW (Lempel-Ziv-Welch) compression, a lossless algorithm for each individual frame. But GIF is limited to 256 colors per frame. This constraint, defined in the 1989 GIF89a specification, is why GIFs of photographs look terrible (banding and dithering) while GIFs of UI interactions and simple animations look crisp.
Each frame in a GIF can have:
- Its own color palette (local color table) or share the global palette
- A disposal method (how to handle the previous frame before drawing the next)
- A delay time (typically 30-100ms between frames for smooth animation)
- A transparent color index
The disposal method is particularly important for optimization. "Leave in place" means each frame draws on top of the previous one, so only the changed pixels need to be included. "Restore to background" clears the frame area before drawing. Choosing the right disposal method can dramatically reduce file size for animations where only a small area of the image changes between frames.
Creating GIFs from the command line
FFmpeg is the Swiss Army knife approach:
# Convert video to GIF
ffmpeg -i input.mp4 -vf "fps=15,scale=600:-1:flags=lanczos" \
-c:v gif output.gif
# Better quality with palette generation
ffmpeg -i input.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,palettegen" \
palette.png
ffmpeg -i input.mp4 -i palette.png \
-lavfi "fps=15,scale=600:-1:flags=lanczos [x]; [x][1:v] paletteuse" \
output.gif
The two-pass approach with palette generation produces noticeably better color quality. The first pass analyzes the video to find the optimal 256-color palette. The second pass uses that palette for encoding.
ImageMagick can assemble individual frames:
# Create GIF from image sequence
convert -delay 8 -loop 0 frame_*.png output.gif
# Optimize file size
convert output.gif -layers Optimize optimized.gif
GIF optimization matters
An unoptimized GIF can easily be 10-20 MB for a few seconds of screen recording. For web use, that is unacceptable. Key optimization levers:
Frame rate. 15 FPS is sufficient for most UI demonstrations. Going from 30 FPS to 15 FPS roughly halves the number of frames and thus the file size.
Resolution. Scale down. A full 1920x1080 GIF is wasteful if it is displayed at 600px wide on your README. Scale to the display size.
Color reduction. If your GIF is a terminal recording or simple UI, you might only need 64 or 128 colors instead of the full 256.
Frame differencing. Tools like gifsicle can optimize by storing only the pixels that change between frames, dramatically reducing size for animations where most of the image is static.
gifsicle -O3 --lossy=80 input.gif -o optimized.gif
When to use GIF vs other formats
GIF: Universal support, works in markdown/READMEs, autoplay everywhere, no audio. Best for short loops under 10 seconds, UI demos, reaction images.
WebP animated: 25-35% smaller than GIF at the same quality. Supported in all modern browsers but not universally in chat apps and documentation platforms.
MP4/WebM: Dramatically smaller files, better quality, audio support. But they do not autoplay everywhere, do not work in markdown, and require video player controls. Better for anything over 10 seconds.
APNG: PNG-quality animation with full alpha transparency. Limited tool support and not significantly smaller than GIF for most content.
For developer documentation, GIF remains the practical choice because it works in GitHub READMEs, Notion, Confluence, and every chat platform without requiring the reader to click play.
I built a GIF builder at zovo.one/free-tools/gif-builder that lets you assemble GIFs from individual images directly in the browser. Upload your frames, set the timing, adjust the canvas size, and export. No software to install, no command-line flags to memorize, and it runs entirely client-side so your images never leave your machine.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
Top comments (0)