GIF

Requirements

Required for creating GIFs:

1. ffmpeg — video to GIF conversion

Optional:

1. gifsicle — post-optimization (reduces size 30-50%)
2. GIPHY_API_KEY — for Giphy search API
3. TENOR_API_KEY — for Tenor search API

Where to Find GIFs

| Site | Best for | API | |------|----------|-----| | Giphy | General, trending | Yes (key required) | | Tenor | Messaging apps | Yes (key required) | | Imgur | Viral/community | Yes | | Reddit r/gifs | Niche, unique | No |

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

| Setting | Value | Why | |---------|-------|-----| | fps | 8-12 | Higher = much larger file | | scale | 320-480 | 1080p GIFs are massive | | lanczos | Always | Best scaling quality |

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

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

Common Mistakes

1. No palettegen in FFmpeg — colors look terrible
2. FPS >15 — file size explodes for no visual benefit
3. No lazy loading on web — blocks page load
4. 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"