Animation File Size Benchmark: Rive vs GIF vs WebM vs MOV vs MP4 (Real Data)
By the Charmotion team · Updated
For a full set of 17 character animations, one Rive file was 40 KB for a flat mascot, against 2.6 MB of MP4, 6.1 MB of transparent WebM and 8.0 MB of GIF. Counting the Rive web runtime, Rive still wins for many states, but for a single loop the gap shrinks to almost nothing, and for 3D art GIF is the worst choice by far.
Key takeaways
- A flat mascot's whole 17-animation set fit in a 40 KB .riv (12 KB brotli-compressed); the same set was 2.6 MB as MP4, 6.1 MB as transparent WebM, 9.4 MB as HEVC MOV and 8.0 MB as GIF.
- The Rive web runtime costs about 373 KB brotli-compressed once per site, so for one single loop Rive and transparent WebM end up close.
- For a glossy 3D logo, GIF ballooned to 42.9 MB for the set and 4.4 MB for one idle loop, almost eight times the MP4.
- Rive pulls ahead as soon as you need several states, interactivity or crisp scaling; MP4 is still the smallest choice for one opaque clip.
What exactly was measured?
We ran two real images through the Charmotion engine on October 25, 2026 and measured every file it produced. Both sets contain the same 17 animations (10 loops, 6 one-shot reactions and a launch intro), 35.8 seconds of animation in total.
- A flat mascot, front-facing. Flat art is traced into vector parts and rigged, so the .riv contains shapes, not pixels.
- Aegis, a glossy 3D shield logo with soft gradients, reflections and shading. Art like this is animated as-is: the original pixels are embedded in the .riv as image layers (the shield plus separate eye layers) and deformed with a mesh.
| Format | Settings |
|---|---|
| Rive .riv | One file with all 17 animations and three state machines |
| MP4 | H.264 (libx264, preset slow, CRF 16), 1080 x 1080, 60 fps, solid background |
| Transparent WebM | VP9 with alpha (libvpx-vp9, CRF 28, yuva420p), 1080 x 1080, 60 fps |
| Transparent MOV | HEVC with alpha via Apple AVFoundation, 1080 x 1080, 60 fps |
| GIF | 480 x 480, 25 fps, per-clip palette, Bayer dithering, solid background |
The Rive runtime figure is @rive-app/canvas-lite 2.44.0 (rive.js plus rive.wasm), compressed by us with brotli at quality 11 and gzip level 9. Rive's own documentation lists canvas-lite at 222 KB brotli; our measurement of this version came out larger, so we use our number. Video files are already compressed, so their sizes are what goes over the wire.
How big is each format for the full 17-animation set?
Measured October 25, 2026, totals for all 17 animations (the 9:16 video is excluded):
| Format | Flat mascot | 3D logo (Aegis) |
|---|---|---|
| Rive .riv (one file) | 40 KB (12 KB brotli) | 1.0 MB (880 KB brotli) |
| MP4, 1080 px | 2.6 MB | 6.0 MB |
| Transparent WebM, 1080 px | 6.1 MB | 18.4 MB |
| Transparent HEVC MOV, 1080 px | 9.4 MB | 10.8 MB |
| GIF, 480 px | 8.0 MB | 42.9 MB |
Two things stand out. The flat mascot's .riv is about 65 times smaller than its MP4 set, because it stores shapes and keyframes instead of 60 frames per second. And the 3D logo's .riv is much bigger than the flat one, because it carries the original artwork as an image; it is still around 6 times smaller than the MP4 set.
Is Rive still smaller if you only need one looping animation?
Only a little. Once you count the Rive web runtime, a single transparent loop as a .riv is lighter than WebM but not by much, HEVC MOV can be lighter still, and MP4 is the lightest if you do not need transparency. A .riv needs the Rive web runtime, which is a one-time download per site. Here is one idle loop on a web page, as transferred:
| One idle loop, over the wire | Flat mascot | 3D logo |
|---|---|---|
| Rive: runtime (373 KB brotli) + .riv | about 385 KB | about 1.25 MB |
| Transparent WebM idle loop (4 s) | 500 KB | 2.0 MB |
| Transparent HEVC MOV idle loop | 743 KB | 1.1 MB |
| GIF idle loop (480 px) | 698 KB | 4.4 MB |
| MP4 idle loop (no transparency) | 211 KB | 558 KB |
So for a single opaque clip, MP4 is the lightest file. For a single transparent loop, Rive comes out a little lighter than WebM, and for detailed 3D art HEVC MOV is lighter than both. The picture changes as soon as you need a second state: every extra video clip adds hundreds of kilobytes, while the .riv already contains all 17. If the runtime is already on the page for something else, the cost of each extra Rive character is just its file.
File size isn't the whole cost. Video is decoded by the browser's media pipeline, while Rive draws each frame with its renderer. We did not measure CPU or battery use here, so test on your slowest target device.
Why does GIF get so big for 3D logos and gradients?
GIF stores at most 256 colors per frame and compresses with LZW, which works well on flat areas of identical color and badly on smooth gradients, shading and noise. MDN describes GIF as limited to 8-bit indexed color and notes that converting full-color images to GIF can result in unsatisfactory dithering. Dithering, which hides banding, adds even more pixel-level variation, which the compressor handles poorly.
That is exactly what happened here: the flat mascot's GIF set was 3 times its MP4 set, but the 3D logo's GIF set was about 7 times its MP4 set, at less than half the resolution (480 px against 1080 px). web.dev's guidance is to replace animated GIFs with video for this reason. GIF also has only on/off transparency, so soft edges either get a halo or a solid background.
Which animation format should I use, based on these numbers?
| Situation | Best format | Why |
|---|---|---|
| Several states that switch in an app or site | Rive .riv | All states in one small file; switch with one input |
| One transparent loop on a web page | Rive or WebM + HEVC MOV | Similar weight; Rive scales crisply, video needs no runtime |
| One opaque clip (social, email preview, docs) | MP4 | Smallest file, plays everywhere |
| Places that only take images (chat, some email clients) | GIF | Compatibility, but keep it small and flat-colored |
| Video editing and overlays | HEVC MOV or ProRes 4444 | Alpha that editors import |
For a deeper comparison of what each format supports, see GIF vs WebM vs MP4 vs Lottie vs Rive. For runtime size and performance between Rive and Lottie, see Rive vs Lottie performance.
These numbers come from Charmotion's own output, so they reflect our encoder settings. Paid-plan sets ship all five formats, which is why we could measure them side by side. Every set on the paid plans includes them all, plus code.
Frequently asked questions
How small can a Rive file be for a whole character?
In our measurement, a flat mascot with 17 animations and three state machines was 40,501 bytes, or about 12 KB after brotli compression. Art that has to be embedded as an image, like a 3D logo, is much larger: about 1.0 MB for the same 17 animations.
Do I need to count the Rive runtime in page weight?
Yes, once per site. The canvas-lite web runtime we measured (version 2.44.0) was about 373 KB brotli-compressed for the JavaScript and WebAssembly together. After that, each additional .riv only costs its own file size.
Why is my animated GIF bigger than the same video?
GIF keeps at most 256 colors per frame and its compression struggles with gradients and dithering. In our test a 3D logo's 4-second idle loop was 4.4 MB as a 480 px GIF and 558 KB as a 1080 px MP4.
Quick answers from this guide
Sources
- Replace animated GIFs with video for faster page loads, web.dev
- Image file type and format guide, MDN Web Docs
- @rive-app/canvas-lite, npm
- Web (JS) runtime: canvas vs webgl2 vs canvas-lite, Rive
- Preloading WASM, Rive
- Video with alpha transparency on the web, Jake Archibald