Animated WebP Maker

Create animated WebP files from multiple images with timing controls.

Tested tool guide Tested browser tools Checked August 16, 2026

What Animated WebP Maker does, with a checked example

This tool takes a batch of still images and encodes them, in the order given, as frames inside a single animated WebP (a RIFF container carrying an ANIM chunk plus one ANMF chunk per frame). Each frame gets its own display duration in milliseconds, and the whole sequence gets a loop count, with 0 meaning infinite. Frames are compressed individually, lossy or lossless. The detail people miss most: total playback time per loop is the sum of the per-frame durations, not a fixed frame rate, so three frames with very different durations will visibly stutter rather than play at a steady pace.

Worked example

A concrete input and expected output from the current implementation.

Input

3 images (frame1.png, frame2.png, frame3.png), durations set to 500 ms, 500 ms, and 1000 ms, loop count = 0

Expected output

one animated .webp with 3 frames playing at 500 ms, 500 ms, then 1000 ms, a total of 2000 ms per loop, repeating indefinitely

The tool writes one ANMF chunk per image in the order supplied, each carrying its own duration, and sets the ANIM loop-count field to 0 for infinite looping; per-loop time is just the sum of the three durations.

How the result is produced

Container and per-frame compression

Each output file is a RIFF/WEBP container holding one ANIM chunk (background color, loop count) followed by one ANMF chunk per input image. Every frame is compressed on its own as a still WebP image, either lossy (VP8, with adjustable quality) or lossless (VP8L). There is no cross-frame delta compression, so file size scales roughly with frame count times per-frame image size.

Per-frame timing and looping

Duration is set per frame, or as one value applied to all frames, and is written into each ANMF chunk as a millisecond value. Because timing lives with each frame rather than a global frame rate, you can mix a 2-second title frame with 100 ms motion frames in the same file. The loop-count field (0 to 65535, 0 = infinite) controls how many times the full sequence repeats.

Good uses

Turning a handful of manually exported screenshots or app states into a small looping preview to embed on a page instead of a video tag.
Assembling a hand-drawn or rendered frame sequence (sprite animation, stop-motion stills, timelapse captures) into one compact animated file.
Building a looping product shot or icon animation from a few PNG frames where GIF's 256-color palette would show visible banding.

Limits and checks

The tool encodes frames in exactly the order and durations you supply; it does not deduplicate repeated frames or interpolate motion between them, so a jumpy source sequence stays jumpy in the output.
The WebP animation format lets frames of different sizes sit at an offset within a shared canvas, so if your source images aren't already the same pixel dimensions, check the result for unexpected padding, cropping, or misalignment before publishing it.
Animated WebP support in older browser versions, notably Safari before it added support, was inconsistent; if any part of your audience is on an old browser, verify playback there rather than assuming universal support.

Common questions

Can I feed it an existing GIF or a short video clip instead of separate images?

No, it expects individual still image files, such as PNG or JPG, one per frame. To animate a GIF or a video clip you would first need to extract its individual frames as separate image files, then load those frames here in the order you want them to play.

Do all my frames need to be the same width and height?

Not strictly, since the WebP animation format allows frames of different sizes placed at an offset within a shared canvas, but mismatched input dimensions are a common source of unexpected padding or misalignment. Matching all frames to the same size before uploading gives the most predictable, cleanly cropped result.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.