Three Formats, One Job
The job is simple: display a looping animation in a browser without audio. Three formats compete — GIF, APNG, and animated WebP. Each has been around for years, yet confusion persists about which one to use.
GIF is the default. It works everywhere. It's also the worst option in almost every measurable way. APNG and animated WebP offer dramatically better quality and compression, with different trade-off profiles.
The Formats at a Glance
| Feature | GIF | APNG | Animated WebP |
|---|---|---|---|
| Year introduced | 1989 | 2004 | 2010 |
| Maximum colors per frame | 256 | 16.7 million | 16.7 million |
| Alpha transparency | 1-bit (on/off) | 8-bit (full) | 8-bit (full) |
| Compression | LZW | DEFLATE (PNG-based) | VP8/VP8L |
| Typical size vs GIF | Baseline | 10-30% smaller | 40-70% smaller |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes (14+) |
| iOS Safari | Yes | Yes | Yes (14+) |
| Email clients | Yes | No | No |
GIF: The Universal Fallback
GIF stores each animation frame as a separate 256-color image using LZW compression. The 256-color limit per frame is its defining constraint — photographic content requires dithering, which both looks bad and compresses poorly.
Despite its age, GIF remains the only animated image format that works reliably in:
- Email clients (Outlook, Gmail, Apple Mail)
- Most chat platforms
- GitHub README files and documentation
Real-world GIF sizes for a 5-second, 480px-wide animation at 15fps:
- Simple flat-color logo animation: 150-400 KB
- Screen recording: 800 KB - 2 MB
- Photographic content: 3-8 MB
APNG: PNG's Animated Extension
APNG (Animated PNG) uses the same lossless DEFLATE compression as PNG — full 24-bit color, 8-bit alpha, zero color banding.
| Content type | GIF size | APNG size | APNG reduction |
|---|---|---|---|
| Flat-color logo | 250 KB | 180 KB | 28% smaller |
| UI screen recording | 1.2 MB | 850 KB | 29% smaller |
| Gradient animation | 800 KB | 200 KB | 75% smaller |
| Natural footage | 5 MB | 4.2 MB | 16% smaller |
Key limitation: No lossy compression. For natural footage, APNG files are often close to GIF in size. Also, email clients display only the first frame — APNG animation is invisible in email.
Pro Tip: Use the image converter to batch convert GIF files to APNG when you need better transparency support and don't need email compatibility.
Animated WebP: The Modern Choice
Animated WebP stores frames using VP8 (lossy) or VP8L (lossless) compression. VP8 uses inter-frame prediction — storing only what changed between frames — the same approach used by video codecs. The result is dramatically smaller files.
| Content type | GIF size | Animated WebP (lossy) | Reduction |
|---|---|---|---|
| Flat-color logo | 250 KB | 120 KB | 52% smaller |
| UI screen recording | 1.2 MB | 380 KB | 68% smaller |
| Gradient animation | 800 KB | 90 KB | 89% smaller |
| Natural footage | 5 MB | 1.8 MB | 64% smaller |
Creating Animated WebP
# From GIF
gif2webp -q 80 input.gif -o output.webp
# From video using FFmpeg
ffmpeg -i input.mp4 -vf "fps=15,scale=480:-1" -c:v libwebp -quality 80 -lossless 0 output.webp
Safari Support (Now Mostly Resolved)
Animated WebP lacked Safari support until Safari 14 (September 2020). As of 2026, Safari 14+ adoption is effectively universal. For most consumer-facing web content, animated WebP is safe without a GIF fallback.
Choosing Between Formats
Must work in email? → Use GIF. No other format works reliably in email clients.
Need perfect transparency with gradients, no email needed? → APNG (lossless) or animated WebP lossless.
General web use? → Animated WebP is the best default. Smaller files, better quality, universal modern browser support.
Photographic content? → Animated WebP (lossy). GIF and APNG both struggle here.
What About Video?
For animations longer than 3 seconds, a short video loop (MP4 with autoplay muted loop) almost always beats all three image formats. A 5-second clip that would be 3 MB as a GIF might be 200 KB as H.264 MP4.
Convert GIF animations to MP4 with the GIF to MP4 converter for maximum compression. The GIF maker handles the reverse when you need an image format.
Converting Between Formats
# GIF to animated WebP
gif2webp -q 80 -m 6 input.gif -o output.webp
# WebP to GIF (fallback)
ffmpeg -i input.webp -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif
# APNG to animated WebP
ffmpeg -i input.apng -c:v libwebp -quality 85 output.webp
CSS Implementation
<picture>
<source srcset="animation.webp" type="image/webp" />
<img src="animation.gif" alt="Description" />
</picture>
Respect the prefers-reduced-motion media query for users with vestibular disorders.
Frequently Asked Questions
Is animated WebP truly smaller than GIF in all cases?
For most real-world content, yes — typically 40-70% smaller. The exception is very simple 2-3 frame animations with flat colors where WebP's per-frame overhead reduces the gap.
Can I use animated APNG in email?
No. Email clients render only the first frame of an APNG. If you need animation in email, GIF is the only option.
Does animated WebP support variable frame timing?
Yes. Each frame in an animated WebP can have a different duration. GIF and APNG also support this.
Does animated WebP support lossless compression?
Yes. Use -lossless 1 in FFmpeg's libwebp encoder. Lossless animated WebP is typically 15-30% smaller than equivalent APNG.
Conclusion
Use animated WebP for web content, keep GIF for email. APNG fills a middle ground when you specifically need lossless quality with full transparency and your audience doesn't need email support.
The webp conversion guide covers the full range of WebP capabilities beyond animation. The gif optimization guide has techniques for making GIF as small as possible when you're stuck with it. Use the image compressor to reduce animated image file sizes without full format conversion.
