gif

Where to Find GIFs

Giphy API

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

# Trending
curl "https://api.giphy.com/v1/gifs/trending?api_key=KEY&limit=10"

Response sizes: original, downsized, fixed_width, preview—use downsized for chat.

Tenor API

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

Returns: gif, mediumgif, tinygif, mp4, webm—use tinygif or mp4 for performance.

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

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"), not "GIF"
• 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