How to Convert MP4 to Lottie for Web and Apps

A normal MP4 is pixel video. A classic Lottie animation is vector data: shapes, paths, and keyframes. No browser tool can turn arbitrary footage into a small, editable vector Lottie with reliable quality, and tools that claim to are usually tracing outlines frame by frame with poor results.

The practical conversion is different. The converter decodes the video frame by frame, optionally removes a solid background, and writes the frames as images into a ZIP alongside a Lottie JSON that plays them in order. Any player that supports image assets can then treat the clip like any other Lottie: loop it, pause it, or trigger it from code. This is useful when your app already has a Lottie pipeline and the source material happens to be video, such as an AI-generated sticker or a short product shot.

Because every frame is stored, the size of a Lottie ZIP is close to frame count multiplied by the size of one frame. Frame count is duration multiplied by frame rate. Frame size depends on dimensions and on how much detail the picture has. The measured table above gives realistic per-frame figures at 480 pixels: about 1.6 KB for flat colors, about 2 KB for a typical UI clip, over 6 KB for detailed footage, and nearly 10 KB for a gradient subject with soft edges.

Use those numbers to sanity-check a plan. A 3-second loop at 24 fps is 72 frames. At UI-clip complexity that is roughly 140 KB, which is reasonable for an onboarding screen. A 10-second clip at 30 fps is 300 frames; at busy-footage complexity that is close to 2 MB, which is too heavy for most landing pages. When the arithmetic comes out large, the fix is almost always to cut duration and frame rate rather than to lower quality.

The converter runs entirely in the browser. Decoding uses the WebCodecs API, keying runs on the GPU through WebGL2, and encoding happens locally. The source file is not uploaded.

Pick dimensions for the largest size the animation will actually display at, multiplied by the device pixel ratio you care about. A 240-pixel slot on a 2x screen needs 480 pixels, not 1,080. Pick frame rate for the motion: UI transitions and stickers often look fine at 12 to 15 fps, while fast camera motion needs 24 or more.

If the destination is a web page that only needs a transparent video, compare a WebM export before choosing Lottie, and measure it on your own clip. In the September runs with flat, simple clips, WebM was about a tenth of the Lottie ZIP size. For the gradient sticker the result reversed: WebM was 1,215,389 bytes, 32 percent larger than the 918,089-byte Lottie ZIP, and it dropped four frames. The GIF was the largest at 1,316,183 bytes and supports only fully transparent or fully opaque pixels. The format comparison guide covers those tradeoffs in more detail.

Unzip the package and keep its folder structure. The JSON refers to each frame by a relative path, so flattening the folders or renaming images breaks playback. Serve the JSON and the image folder from the same base path, then load the JSON with your player as you would any Lottie.

Check memory on the lowest device you support. A player holds decoded frames in memory, and 300 frames at 480 by 480 is a lot more than a vector animation of the same length. For long or large clips, a native video element may simply be the better tool.