Animated WebP: Replace GIF and APNG With a Modern Format

Animated WebP files are up to 64% smaller than GIF with 24-bit colour, alpha transparency, and support for lossy and lossless frame encoding.

Animated WebP stores multiple image frames in a single file using a structured chunk hierarchy — the VP8X container declares animation support, the ANIM chunk holds global loop count and background colour, and individual ANMF (Animation Frame) chunks each carry a compressed image, a duration, position offset, and compositing instructions. This architecture gives animated WebP far more expressive power than GIF while compressing frames with the same VP8/VP8L engines that make static WebP so efficient, delivering animations that are up to 64% smaller than their GIF equivalents.

Advantages over GIF #

GIF has been the default animated image format on the web for over three decades, but it was designed for a computing era with very different constraints. Animated WebP removes every major limitation:

Full 24-bit Colour #

WebP frames support the full 16.7 million colour RGB space. GIF is hard-limited to a 256-colour palette per frame, causing visible colour banding on photographs, gradients, and skin tones.

8-bit Alpha Transparency #

WebP carries a full 0–255 alpha channel per frame. GIF supports only 1-bit binary transparency (a pixel is either fully transparent or fully opaque), making smooth fade-ins, drop shadows, and anti-aliased edges impossible.

Up to 64% Smaller #

Google’s published data shows animated WebP files are on average 64% smaller than GIF for equivalent animations. Even modest animations see dramatic size reductions, directly improving load times and reducing data costs for mobile users.

Mixed Lossy and Lossless Frames #

A single animated WebP file can contain a mixture of lossy-compressed and lossless-compressed frames. You can apply heavy compression to photographic frames while keeping title cards or logo frames pixel-perfect — all in one file.

Advantages over APNG #

APNG (Animated PNG) improves on GIF’s colour limitations but still trails animated WebP in important areas:

File Size #

Animated WebP typically produces smaller files than APNG for equivalent animations. APNG frames are compressed with DEFLATE (the same algorithm as PNG), which is less efficient than VP8L on photographic content and comparable on flat-colour graphics. For animations with any photographic content, WebP’s lossy frame option has no APNG equivalent.

Tool Support #

The libwebp toolkit — distributed by Google and available for every major platform — provides dedicated img2webp and gif2webp tools with well-documented flags. APNG encoding requires separate tools (apngasm, FFmpeg, or browser-based assemblers) with less consistent behaviour across versions.

Lossy Frames #

APNG is always lossless. Animated WebP supports lossy encoding per frame, making it the only animated format that can compress photographic animation content comparably to video codecs while remaining a standard image format.

Frame Control #

Every ANMF chunk in an animated WebP file carries metadata that controls how the frame is displayed and composited:

Frame Duration #

Each frame specifies its own display duration in milliseconds. This allows variable frame rates within a single animation — you can hold a title card for 2000ms and then play action frames at 16ms (≈60fps) without splitting into separate files.

X/Y Offset #

Frames do not need to cover the full canvas. An ANMF chunk can specify an X and Y offset so only the changed region of the canvas is updated. Encoding only the delta region (rather than a full frame) reduces file size significantly for animations where only part of the image moves.

Disposal Method #

The disposal method tells the decoder what to do with a frame’s canvas region before rendering the next frame. Do Not Dispose keeps the previous frame visible (use for incremental updates). Dispose to Background clears the frame region to the background colour before the next frame is drawn (use when frames do not overlap cleanly).

Blending Method #

The blending method controls how a frame’s alpha channel interacts with the canvas beneath it. Alpha Blending composites the frame over the canvas using standard alpha compositing, preserving partial transparency. Do Not Blend overwrites canvas pixels directly with the frame’s RGBA values, bypassing alpha compositing.

Creating Animated WebP with img2webp #

The img2webp tool (included in the libwebp package) assembles a sequence of image files into an animated WebP. Each input frame can be a PNG, JPEG, TIFF, or WebP file.

# Create animated WebP from individual frames
img2webp -d 100 frame1.png frame2.png frame3.png -o animation.webp

# Use a shell glob to include all matching frames in order
img2webp -d 100 frame*.png -o animation.webp

# Lossy frames for smaller file size
img2webp -lossy -q 80 -d 80 frame*.png -o animation.webp

# Loop count (0 = loop forever)
img2webp -loop 0 -d 100 frame*.png -o animation.webp

The -d flag sets the frame duration in milliseconds and applies to all frames that follow it on the command line. You can change duration mid-sequence by inserting additional -d flags before specific frames, enabling variable frame rates in a single command.

Converting GIF to Animated WebP #

If you have existing GIF animations, convert them to WebP using the dedicated gif2webp tool, also included in libwebp:

# Using gif2webp (part of libwebp)
gif2webp input.gif -o output.webp

# With quality control
gif2webp -q 80 input.gif -o output.webp

gif2webp preserves the original GIF’s frame timings, loop count, and transparency information. Adding -q encodes frames in lossy mode, typically reducing the output file size well beyond the ~64% average reduction already achieved by lossless conversion alone.

To convert in the opposite direction — animated WebP back to GIF — use our free WebP to GIF converter, which preserves frame timing and looping entirely in your browser.

All modern browsers support animated WebP: Chrome 32+, Firefox 65+, Safari 14+, and Edge 18+. If you need to support older Safari versions (pre-14) or Internet Explorer, you will need a fallback strategy.

Serve animated WebP alongside a GIF fallback using the <picture> element for maximum compatibility. The browser automatically selects the first source format it supports:

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

This approach requires no JavaScript, adds no render-blocking resources, and ensures users on modern browsers always receive the smaller WebP file while older browsers fall back to GIF gracefully.