Convert animation without flattening the alpha channel

An animated WebP can hold transparency, but simply changing its file extension does not create a transparent video. A useful WebP-to-WebM workflow has to preserve the per-frame alpha channel, keep timing intact, encode the browser video, and verify the result after encoding. The converter on this page performs that complete job and packages the outputs together.

Upload a WebP with real transparent pixels—not an animation rendered against black or white. When processing finishes, download the ZIP. It contains a VP9 WebM for browsers that support WebM alpha, an HEVC alpha video for Safari, a PNG poster, and an HTML snippet. Each video is inspected before the bundle is marked verified.

Use the right source for clean edges

Start with the highest-quality transparent animation you have. Semi-transparent shadows, glows, motion blur, and anti-aliased edges need actual alpha values. If the source has already been composited onto a solid color, no converter can reconstruct the missing transparency perfectly. Keep the source dimensions close to the rendered size on your site; oversized media costs bandwidth and usually provides no visible benefit.

After downloading, test the bundle over more than one background. A dark surface can hide dark edge contamination, while a light surface exposes it immediately. Try a solid color, a photograph, and a moving page element behind the video. This is the fastest way to confirm that the transparent background is real.

Keep frame timing in the review, too. Animated WebP files can assign different durations to individual frames. A conversion that forces every frame to one rate may make pauses disappear or movement feel uneven. Compare the source and output at the same timecode, confirm that the loop closes cleanly, and make sure the final frame does not linger unexpectedly.

Embed the WebM with a Safari fallback

<video autoplay muted loop playsinline poster="poster.png">
  <source src="out.mov" type='video/mp4; codecs="hvc1"'>
  <source src="out.webm" type="video/webm">
</video>

Put the Safari-compatible source first, followed by WebM. Keep muted and playsinline when the animation should autoplay, and include the poster so reduced-motion users and slow connections receive a polished still frame. Add accessible surrounding text when the motion communicates information.

The reproducible RevNex benchmark converts a 1.1 MB animated WebP fixture into a 320 KB verified WebM, a 71.3% reduction for that specific fixture. Results vary with dimensions, duration, detail, and motion. For broader implementation guidance, read the definitive guide to transparent video on the web.