GIF

Requirements

Required for creating GIFs:

• ffmpeg — video to GIF conversion

Optional:

• gifsicle — post-optimization (reduces size 30-50%)
• GIPHY_API_KEY — for Giphy search API
• TENOR_API_KEY — for Tenor search API

Where to Find GIFs

Creating GIFs with FFmpeg

Always use palettegen (without it, colors look washed out):

ffmpeg -ss 0 -t 5 -i input.mp4 \
  -filter_complex "fps=10,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" \
  output.gif

Post-Optimization

If gifsicle is available:

gifsicle -O3 --lossy=80 --colors 128 input.gif -o output.gif

Reduces size 30-50% with minimal quality loss.

Video Alternative

For web, use video instead of large GIFs (80-90% smaller):

<video autoplay muted loop playsinline>
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Accessibility

• WCAG 2.2.2: Loops >5s need pause control
• prefers-reduced-motion: Show static image instead
• Alt text: Describe the action ("Cat jumping off table")
• Three flashes: Nothing >3 flashes/second (seizure risk)

Common Mistakes

• No palettegen in FFmpeg — colors look terrible
• FPS >15 — file size explodes for no visual benefit
• No lazy loading on web — blocks page load
• Using huge GIF where video would work — 10x larger

API Quick Reference

Giphy search:

curl "https://api.giphy.com/v1/gifs/search?api_key=$GIPHY_API_KEY&q=thumbs+up&limit=10"

Tenor search:

curl "https://tenor.googleapis.com/v2/search?key=$TENOR_API_KEY&q=thumbs+up&limit=10"