GIF vs APNG vs WebP vs AVIF: Animated Image Formats Compared

GIF is 38 years old and still everywhere. Newer formats are dramatically smaller and better-looking. Here's what each animated format actually does, where it works, and how to convert between them.

Why GIF is still everywhere

• Universal support. Every browser, email client, messaging app, CMS, social platform, and device from the last 30 years displays GIF. There's no other animated format with this coverage.
• No player required. Drop a GIF on a webpage and it plays. No JavaScript, no video element, no codec negotiation.
• Cultural inertia. "Send me a GIF" is a phrase that means "send me a short animation." The format and the word have become synonymous.
• Simple to create. Every image editor, screen recorder, and meme tool outputs GIF. The ecosystem for creating WebP or AVIF animations is still limited by comparison.

GIF's real limitations

256 colors per frame is GIF's defining constraint. The format uses an indexed color palette — each frame picks up to 256 colors from the full RGB space, and every pixel stores an 8-bit index into that palette. Photos and gradients look terrible. Dithering can help, but it adds visual noise.

Maximum colors per frame: 256 (8-bit indexed)
Transparency: 1-bit (one color in the palette is marked transparent)
Compression: LZW lossless — no lossy option in spec
Color depth: 8-bit per channel, 256 colors total
Animation control: frame delay in 1/100 second units
Looping: via Netscape extension (a hack, not part of the spec)

The transparency is binary — a pixel is either fully transparent or fully opaque. No semi-transparency, no anti-aliasing. This is why GIF text on rounded buttons looks jagged — the soft edges from anti-aliasing can't be represented.

File size reality

GIF files are large. Not because the format wastes space, but because LZW lossless compression is inefficient for typical web content compared to modern codecs. A 3-second, 480p animation:

As MP4 (H.264):      ~300 KB
As GIF:              ~3.5 MB (about 12x larger)
As animated WebP:    ~600 KB (lossy, similar quality to GIF)
As animated AVIF:    ~350 KB

When GIF is still the right choice

• Email newsletters — WebP/AVIF aren't supported in email
• Messaging apps (Slack, Discord, iMessage) — GIF support is guaranteed
• Social media sharing where you don't control the platform
• Simple animations with flat colors and few gradients (where 256 colors is enough)
• Anywhere you need an image tag rather than a video element

What APNG improves over GIF

• Full color: 24-bit (16.7 million colors) compared to GIF's 256. Photos, gradients, and complex illustrations look correct.
• Alpha transparency: 8-bit alpha channel with smooth edges. Rounded corners, drop shadows, and partially transparent pixels work properly.
• Higher fidelity: Lossless compression with no palette quantization artifacts.
• Backward compatibility: Non-supporting viewers show a static image rather than breaking.

APNG's drawbacks

• Large file sizes. Full-color lossless is expensive. An APNG is typically 3-5x larger than an equivalent GIF, and 4-8x larger than a lossy WebP.
• No lossy option. Unlike WebP, there's no quality knob to trade some fidelity for smaller files.
• Limited tool support. You can't save APNG from most image editors without plugins or conversion tools.
• Email support is poor. Most email clients don't render APNG animation (they show the first frame).

Where APNG shines

APNG is the right format when quality matters more than file size and GIF's color limit is a real problem: animated logos, UI micro-animations with smooth edges, app loading indicators with brand colors, stickers and emoji where anti-aliasing is visible.

Convert: GIF to APNG, APNG to GIF.

Compression advantage

Animated WebP achieves compression through two mechanisms GIF doesn't have: inter-frame compression (storing only what changed between frames, like video codecs do) and lossy mode (trading a small amount of quality for dramatically smaller files).

# Typical file sizes for a 3-second animation at 480p, 15 fps:
GIF (lossless):         3.8 MB   (baseline)
APNG (lossless):        6.2 MB   (63% larger than GIF)
WebP lossless:          2.8 MB   (26% smaller than GIF)
WebP lossy q=80:        700 KB   (82% smaller than GIF)
WebP lossy q=60:        350 KB   (91% smaller than GIF)

Browser support

All modern browsers support animated WebP: Chrome 32+, Firefox 65+, Edge 18+, Safari 14+ (Safari was the last holdout, adding support in 2020). As of 2026, animated WebP works for essentially all web traffic except email clients and some messaging apps.

Creating animated WebP

# FFmpeg — from GIF
ffmpeg -i input.gif -c:v libwebp_anim -quality 80 -loop 0 output.webp

FFmpeg — from video file
ffmpeg -i input.mp4 

-vf "fps=15,scale=480:-1" 

-c:v libwebp_anim 

-quality 75 -loop 0 

output.webp
From image sequence
ffmpeg -framerate 15 -i frame%04d.png 

-c:v libwebp_anim -quality 80 -loop 0 

output.webp
Using img2webp (from libwebp tools) for precise control
img2webp -d 66 frame*.png -o output.webp  # 66ms delay = 15fps

Serving WebP with GIF fallback

<picture>
<source srcset="animation.webp" type="image/webp">
<img src="animation.gif" alt="Animation description"
width="480" height="270">
</picture>

Convert: GIF to Animated WebP, Animated WebP to GIF.

Compression numbers

# Same 3-second animation, 480p, 15 fps:
WebP lossy q=80:       700 KB
AVIF medium quality:   320 KB   (54% smaller than WebP q=80)
AVIF high quality:     500 KB   (29% smaller than WebP q=80)

The browser support situation

Animated AVIF support arrived later than static AVIF and varies by browser version:

• Chrome 85+ — supports animated AVIF
• Firefox 93+ — supports animated AVIF
• Safari 17+ (macOS Ventura+, iOS 17+) — supports animated AVIF. Earlier Safari doesn't.
• Edge 109+ — supports animated AVIF

As of early 2026, global browser support for animated AVIF is around 85-90%. That gap matters — Safari users on older iPhones and Macs still need a fallback.

Encoding speed problem

AVIF encoding with libaom-av1 is extremely slow. A 3-second GIF can take several minutes to encode to AVIF even on a fast machine. SVT-AV1 is much faster but produces slightly larger files:

# AVIF with libaom (best quality, very slow)
ffmpeg -i input.gif 

-c:v libaom-av1 -crf 30 -b:v 0 -cpu-used 4 

output.avif

AVIF with SVT-AV1 (faster, slightly larger)
ffmpeg -i input.gif 

-c:v libsvtav1 -crf 35 -preset 4 

output.avif

When AVIF is worth the complexity

AVIF makes sense for high-traffic sites where serving a format 50% smaller than WebP means significant bandwidth savings at scale, and for content that targets modern browsers and can provide fallbacks via the <picture> element.

# 5-second animation, 720p, 24 fps:
GIF:            15 MB
Animated WebP:   2.8 MB
MP4 (H.264):    800 KB   (95% smaller than GIF)
WebM (VP9):     500 KB   (97% smaller than GIF)

Video advantage: inter-frame compression

Video codecs store only the differences between frames (motion vectors, residuals). A static background with moving text means only the text pixels get re-encoded per frame. GIF stores every pixel of every frame. That's the core reason for the massive size difference.

When to use video instead of animated image

<!-- Mimics animated GIF behavior -->
<video autoplay muted loop playsinline
width="640" height="360"
aria-label="Description of animation">
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>

This works in all modern browsers. The playsinline attribute prevents iOS Safari from fullscreening the video. muted is required for autoplay.

When animated images still win over video

• Email: Video elements don't work in email clients. Only GIF plays.
• Messaging apps: Slack, Discord, iMessage handle GIF natively. Video clips require more friction.
• Simple img tags in CMS: If you can only use an image URL, video is not an option.
• Social platforms: Twitter/X, Reddit, and most platforms convert GIF uploads to video automatically — so uploading a GIF often results in video delivery anyway.
• Backward compatibility: Older content management systems and static hosts may not handle video well.

<picture>
<source srcset="animation.avif" type="image/avif">
<source srcset="animation.webp" type="image/webp">
<img src="animation.gif" alt="Description" width="480" height="270">
</picture>

GIF optimization

Even when you're stuck with GIF, there's room to reduce file size significantly:

• Reduce frame rate. 10-15 fps looks smooth. 24 fps is often overkill and doubles file size compared to 12 fps.
• Resize to display dimensions. Don't serve a 1200×800 GIF if it's displayed at 400×267.
• Reduce color count. Start at 256 and work down — many animations look identical at 64 or 128 colors.
• Use gifsicle for lossless optimization: gifsicle -O3 input.gif -o output.gif
• Enable lossy mode: gifsicle -O3 --lossy=80 input.gif -o output.gif (30-60% reduction with minimal visible quality loss)
• Frame disposal optimization: Only encode changed pixels, not full frames. gifsicle handles this automatically.

WebP optimization

• Quality 75-85 is a good starting point — lower if file size is critical, higher if the animation has fine detail.
• Use lossless mode for animations with flat colors or text; lossy for photographic content.
• Test at half resolution — if it looks the same, the source GIF was over-specified.
• The -loop 0 flag means loop forever. -loop 1 plays once and stops.

General principles

• Fewer frames beat better compression. Cutting from 24 fps to 12 fps halves the frame count. No algorithm can match that.
• Dimensions matter most. A 480px-wide animation is 4x fewer pixels than a 960px one.
• Test at actual display size. Quality issues invisible at 300px become obvious at 800px, and vice versa.
• Compare to video. If the animation is over 500 KB, consider whether a muted looping MP4 video element would serve you better.

GIF to WebP (most common conversion)

# Using FFmpeg
ffmpeg -i input.gif -c:v libwebp_anim -quality 80 -loop 0 output.webp

Using cwebp (from libwebp package)
gif2webp -q 80 input.gif -o output.webp
Or use the browser tool (no software needed):
ToolsDock: GIF to Animated WebP

GIF to APNG

# Using ImageMagick
convert input.gif output.apng

Using FFmpeg
ffmpeg -i input.gif -c:v apng output.apng

Video to GIF (for social sharing)

# Generate a color palette first for better quality
ffmpeg -i input.mp4 -vf "fps=12,scale=480:-1:flags=lanczos,palettegen" palette.png

Use the palette to create the GIF
ffmpeg -i input.mp4 -i palette.png 

-filter_complex "fps=12,scale=480:-1:flags=lanczos[x];[x][1:v]paletteuse" 

output.gif
Or use the browser tool: ToolsDock Video to GIF

Browser conversion tools

• GIF to Animated WebP
• Animated WebP to GIF
• GIF to APNG
• APNG to GIF
• Video to GIF
• GIF Optimizer