Benchmark de peso de archivos de animación: Rive vs GIF vs WebM vs MOV vs MP4 (datos reales)
Por el equipo de Charmotion · Actualizado el
Para un set completo de 17 animaciones de personaje, un solo archivo de Rive pesó 40 KB en el caso de una mascota de marca plana, frente a 2.6 MB en MP4, 6.1 MB en WebM con fondo transparente y 8.0 MB en GIF. Contando el runtime web de Rive, Rive sigue ganando cuando hay muchos estados, pero para un solo loop la diferencia casi desaparece, y para arte 3D el GIF es, por mucho, la peor opción.
Puntos clave
- El set completo de 17 animaciones de una mascota plana cupo en un .riv de 40 KB (12 KB comprimido con brotli); el mismo set pesó 2.6 MB en MP4, 6.1 MB en WebM con fondo transparente, 9.4 MB en MOV HEVC y 8.0 MB en GIF.
- El runtime web de Rive pesa unos 373 KB comprimido con brotli, una sola vez por sitio, así que para un único loop Rive y el WebM con fondo transparente quedan muy parejos.
- Para un logo 3D brillante, el GIF se disparó a 42.9 MB para el set y 4.4 MB para un solo loop en reposo (idle), casi ocho veces el MP4.
- Rive toma la delantera en cuanto necesitas varios estados, interactividad o un escalado nítido; el MP4 sigue siendo la opción más pequeña para un solo clip opaco.
¿Qué se midió exactamente?
El 25 de octubre de 2026 procesamos dos imágenes reales con el motor de Charmotion y medimos cada archivo que generó. Ambos sets contienen las mismas 17 animaciones (10 loops, 6 reacciones puntuales y una intro de inicio), 35.8 segundos de animación en total.
- Una mascota plana, de frente. La ilustración plana se convierte en partes vectoriales y se riggea, así que el .riv contiene formas, no píxeles.
- Aegis, un logo 3D brillante en forma de escudo, con degradados suaves, reflejos y sombreado. Un arte así se anima tal cual: los píxeles originales se insertan en el .riv como capas de imagen (el escudo más capas separadas para los ojos) y se deforman con una malla.
| Formato | Configuración |
|---|---|
| Rive .riv | Un archivo con las 17 animaciones y tres máquinas de estados |
| MP4 | H.264 (libx264, preset slow, CRF 16), 1080 x 1080, 60 fps, fondo opaco |
| WebM con fondo transparente | VP9 con canal alfa (libvpx-vp9, CRF 28, yuva420p), 1080 x 1080, 60 fps |
| MOV con fondo transparente | HEVC con canal alfa mediante Apple AVFoundation, 1080 x 1080, 60 fps |
| GIF | 480 x 480, 25 fps, paleta por clip, dithering Bayer, fondo sólido |
La cifra del runtime de Rive corresponde a @rive-app/canvas-lite 2.44.0 (rive.js más rive.wasm), comprimido por nosotros con brotli en calidad 11 y gzip en nivel 9. La documentación de Rive indica 222 KB con brotli para canvas-lite; nuestra medición de esta versión dio un valor mayor, por eso usamos nuestro número. Los archivos de video ya vienen comprimidos, así que su peso es lo que realmente se transfiere por la red.
¿Cuánto pesa cada formato para el set completo de 17 animaciones?
Medido el 25 de octubre de 2026, totales de las 17 animaciones (sin incluir el video 9:16):
| Formato | Mascota de marca plana | Logo 3D (Aegis) |
|---|---|---|
| Rive .riv (un solo archivo) | 40 KB (12 KB con brotli) | 1.0 MB (880 KB con brotli) |
| MP4, 1080 px | 2.6 MB | 6.0 MB |
| WebM con fondo transparente, 1080 px | 6.1 MB | 18.4 MB |
| MOV HEVC con fondo transparente, 1080 px | 9.4 MB | 10.8 MB |
| GIF, 480 px | 8.0 MB | 42.9 MB |
Destacan dos cosas. El .riv de la mascota plana es unas 65 veces más pequeño que su set en MP4, porque guarda formas y keyframes en lugar de 60 fotogramas por segundo. Y el .riv del logo 3D es mucho más grande que el de la mascota plana, porque incluye el arte original como imagen; aun así, es unas 6 veces más pequeño que el set en MP4.
¿Rive sigue siendo más ligero si solo necesitas una animación en loop?
Solo un poco. Si cuentas el runtime web de Rive, un solo loop transparente en .riv pesa menos que en WebM, pero no mucho menos; MOV HEVC puede pesar aún menos, y MP4 es el más ligero si no necesitas transparencia. Un .riv necesita el runtime web de Rive, que se descarga una sola vez por sitio. Este es un loop en reposo (idle) en una página web, tal como se transfiere:
| Un loop en reposo (idle), transferido por la red | Mascota de marca plana | Logo 3D |
|---|---|---|
| Rive: runtime (373 KB con brotli) + .riv | unos 385 KB | unos 1.25 MB |
| Loop en reposo en WebM transparente (4 s) | 500 KB | 2.0 MB |
| Loop en reposo en MOV HEVC transparente | 743 KB | 1.1 MB |
| Loop en reposo en GIF (480 px) | 698 KB | 4.4 MB |
| Loop en reposo en MP4 (sin transparencia) | 211 KB | 558 KB |
Así que, para un solo clip opaco, MP4 es el archivo más ligero. Para un solo loop transparente, Rive resulta un poco más ligero que WebM, y para arte 3D con mucho detalle, MOV HEVC es más ligero que ambos. La situación cambia en cuanto necesitas un segundo estado: cada clip de video adicional suma cientos de kilobytes, mientras que el .riv ya contiene las 17. Si el runtime ya está en la página por otro motivo, cada personaje de Rive adicional solo cuesta el peso de su archivo.
El peso del archivo no es el único costo. El video lo decodifica el sistema multimedia del navegador, mientras que Rive dibuja cada fotograma con su renderizador. Aquí no medimos el uso de CPU ni de batería, así que haz pruebas en tu dispositivo objetivo más lento.
¿Por qué el GIF pesa tanto con logos 3D y degradados?
GIF guarda como máximo 256 colores por fotograma y comprime con LZW, que funciona bien en áreas planas de un mismo color y mal en degradados suaves, sombreados y ruido. MDN describe GIF como limitado a color indexado de 8 bits y señala que convertir imágenes a todo color a GIF puede producir un tramado (dithering) poco satisfactorio. El tramado, que oculta las bandas de color, añade todavía más variación a nivel de píxel, algo que el compresor maneja mal.
Eso es justo lo que pasó aquí: el set en GIF de la mascota plana pesaba 3 veces su set en MP4, pero el set en GIF del logo 3D pesaba unas 7 veces su set en MP4, con menos de la mitad de resolución (480 px frente a 1080 px). Por este motivo, web.dev recomienda reemplazar los GIF animados por video. Además, GIF solo tiene transparencia de todo o nada, así que los bordes suaves terminan con un halo o con un fondo sólido.
Según estas cifras, ¿qué formato de animación debo usar?
| Situación | Mejor formato | Finalidad |
|---|---|---|
| Varios estados que cambian en una app o sitio web | Rive .riv | Todos los estados en un archivo pequeño; cambias con un solo input |
| Un loop transparente en una página web | Rive o WebM + MOV HEVC | Peso similar; Rive escala con nitidez, el video no necesita runtime |
| Un clip opaco (redes sociales, vista previa en email, documentación) | MP4 | El archivo más ligero, se reproduce en todas partes |
| Lugares que solo aceptan imágenes (chats, algunos clientes de email) | GIF | Compatibilidad, pero mantenlo pequeño y con colores planos |
| Edición de video y overlays | MOV HEVC o ProRes 4444 | Canal alfa que los editores importan |
Para una comparación más detallada de lo que admite cada formato, consulta GIF vs WebM vs MP4 vs Lottie vs Rive. Para el tamaño del runtime y el rendimiento de Rive frente a Lottie, consulta Rendimiento de Rive vs Lottie.
Estas cifras provienen de los resultados de Charmotion, así que reflejan nuestra configuración de codificación. Los sets de los planes de pago incluyen los cinco formatos, por eso pudimos medirlos lado a lado. Cada set de los planes de pago los incluye todos, además del código.
Preguntas frecuentes
¿Qué tan pequeño puede ser un archivo de Rive para un personaje completo?
En nuestra medición, una mascota plana con 17 animaciones y tres máquinas de estados (state machines) pesó 40 501 bytes, unos 12 KB tras la compresión con brotli. El arte que se debe insertar como imagen, como un logo 3D, pesa mucho más: unos 1.0 MB para las mismas 17 animaciones.
¿Debo contar el runtime de Rive en el peso de la página?
Sí, una vez por sitio. El runtime web canvas-lite que medimos (versión 2.44.0) pesaba unos 373 KB comprimido con brotli, sumando JavaScript y WebAssembly. A partir de ahí, cada .riv adicional solo cuesta el peso de su propio archivo.
¿Por qué mi GIF animado pesa más que el mismo video?
GIF guarda como máximo 256 colores por fotograma y su compresión tiene dificultades con los degradados y el tramado. En nuestra prueba, el loop en reposo de 4 segundos de un logo 3D pesaba 4.4 MB como GIF de 480 px y 558 KB como MP4 de 1080 px.
Respuestas rápidas de esta guía
Fuentes
- 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