Convert Animated GIF to WebP: Complete Guide

Animated WebP files are typically 64% smaller than GIF at the same visual quality. Here's how to convert using ffmpeg, gif2webp, and Node.js sharp.

GIF vs animated WebP — size comparison

Method 1: ffmpeg (recommended)

ffmpeg is the most flexible tool and handles edge cases well (variable frame rates, palette transparency, etc.).

# Install
# macOS: brew install ffmpeg
# Ubuntu: sudo apt install ffmpeg
# Windows: winget install Gyan.FFmpeg

# Basic GIF → animated WebP
ffmpeg -i animation.gif \
  -c:v libwebp \
  -lossless 0 \
  -compression_level 6 \
  -q:v 70 \
  -loop 0 \
  -preset picture \
  -an -vsync 0 \
  output.webp

# Flags explained:
# -lossless 0       → lossy compression (much smaller)
# -compression_level 6 → max compression effort
# -q:v 70           → quality 0-100 (70 is a good balance)
# -loop 0           → loop forever (0=infinite, -1=no loop)
# -preset picture   → optimized for still-like content
# -an               → no audio
# -vsync 0          → preserve original frame timing

# Lossless mode (larger, but perfect quality)
ffmpeg -i animation.gif \
  -c:v libwebp -lossless 1 -loop 0 -an -vsync 0 \
  output_lossless.webp

# Batch convert all GIFs in folder
for f in *.gif; do
  ffmpeg -i "$f" -c:v libwebp -lossless 0 -q:v 75 -loop 0 -an -vsync 0 \
    "${f%.gif}.webp"
done

Method 2: gif2webp (Google's official tool)

Part of the libwebp package from Google. Specifically designed for GIF → WebP with excellent handling of GIF-specific quirks.

# Install (comes with the webp package)
# macOS: brew install webp
# Ubuntu: sudo apt install webp
# Windows: included with webp tools from Google

# Basic conversion
gif2webp animation.gif -o output.webp

# Quality control
gif2webp -q 80 animation.gif -o output.webp

# Minimize size (slower encoding)
gif2webp -min_size animation.gif -o output.webp

# Lossless
gif2webp -lossless animation.gif -o output.webp

# Batch
for f in *.gif; do gif2webp "$f" -o "${f%.gif}.webp"; done

Method 3: Node.js with sharp

npm install sharp

import sharp from 'sharp';

// Note: sharp converts animated GIF to animated WebP
// as of sharp 0.31 (uses libvips 8.13+)
await sharp('animation.gif', { animated: true })
  .webp({ quality: 80, loop: 0 })
  .toFile('output.webp');

Browser support for animated WebP

Overall browser support is ~97%. For the remaining 3%, serve GIF as fallback using the <picture> element:

<picture>
  <source srcset="animation.webp" type="image/webp">
  <img src="animation.gif" alt="Animation">
</picture>