Rive vs Lottie: rendimiento y peso del runtime

¿Quién ha comparado realmente Rive y Lottie?

Muy pocas personas, y ese es el dato más importante de esta página. Casi todas las cifras de rendimiento o peso que verás en un artículo de "Rive vs Lottie" provienen de una de tres fuentes: Rive, LottieFiles o una única prueba independiente de la consultora Callstack.

Las cifras de los fabricantes no carecen de valor: muestran qué optimizó cada equipo. Pero ninguna compara ambas herramientas en las mismas condiciones, y las cifras de LottieFiles y Margelo ni siquiera se comparan con la otra herramienta. Toma la tabla como una lista de hipótesis por probar, no como un veredicto.

¿Qué midió Callstack en Android?

Callstack creó la misma animación en Lottie y en Rive y ejecutó ambas en una app de React Native en un Sony Xperia Z3, un teléfono lanzado en 2014. Lottie funcionó a unos 17 FPS tanto en el hilo de JavaScript como en el de UI; Rive se mantuvo en unos 60 FPS. Callstack resumió que Rive superó a Lottie "en todos los aspectos excepto la memoria gráfica".

Las limitaciones importan tanto como el titular:

• Un solo dispositivo. Un teléfono Android antiguo y lento amplifica diferencias de CPU que un teléfono moderno podría ocultar.
• Un solo framework. Midió los wrappers de React Native de ese momento, no Android nativo ni la web.
• La memoria fue al revés. La memoria total fue de 276 MB para Rive y 246 MB para Lottie.
• Es de 2023. Ambos runtimes han cambiado desde entonces: el paquete de React Native de Rive se reescribió, y LottieFiles ahora ofrece un reproductor dotLottie basado en ThorVG.

Callstack también recreó un archivo Lottie de 24.37 KB como un .riv de 2 KB. Es un dato independiente sobre peso del archivo, pero se trata de una sola animación pequeña. Respalda la dirección de lo que afirma Rive sin confirmar su proporción exacta.

La lectura honesta: en un dispositivo poco potente, con una animación vectorial de complejidad moderada, Rive mantuvo los cuadros por segundo donde Lottie no pudo, a cambio de un costo de memoria modesto. Si eso se cumple con tu animación y tus dispositivos, solo tu propia prueba te lo puede decir.

¿Por qué Rive parece más pesado al perfilarlo en Xcode?

Porque las dos bibliotecas hacen su trabajo en lugares distintos. El runtime de Rive para Apple dibuja directamente con Metal, dentro del proceso de tu app. El motor de Core Animation de Lottie entrega las capas al servidor de renderizado de Apple, que se ejecuta en un proceso del sistema aparte llamado backboardd.

Si abres Instruments y perfilas solo tu app, el costo de renderizado de Rive aparece en tu proceso y buena parte del de Lottie no. La propia documentación de Rive lo señala y recomienda a los desarrolladores perfilar backboardd además de la app. Ese consejo viene de un fabricante y la página no da cifras, pero la arquitectura de fondo es fácil de confirmar: en iOS, la composición de Core Animation ocurre fuera de la app.

Para una comparación justa en iOS:

• Registra CPU y GPU tanto del proceso de tu app como de backboardd.
• Prueba en un dispositivo físico, no en el Simulator.
• Reproduce la misma animación, al mismo tamaño en pantalla y durante el mismo tiempo.
• Anota el impacto energético, no solo el pico de CPU, porque una mascota en loop se ejecuta durante minutos.

El mismo principio aplica en otros casos. Cualquier comparación que mida un solo proceso, o solo el primer segundo de reproducción, puede inducir a error en cualquier dirección.

¿Lottie resolvió su problema de CPU en iOS?

En gran parte, para las animaciones compatibles. Las versiones antiguas de lottie-ios renderizaban cada fotograma en el hilo principal, y los mantenedores indicaron que ese motor podía usar entre un 5 y un 20 % de CPU o más. En lottie-ios 4.0 (finales de 2022), Airbnb hizo que el motor de renderizado de Core Animation fuera el predeterminado mediante el ajuste .automatic. Core Animation reproduce la animación sin trabajo por fotograma en tu hilo principal.

El problema está en la palabra "compatibles". Si una animación usa funciones que el motor de Core Animation no puede manejar, lottie-ios vuelve al motor del hilo principal para ese archivo. Por eso, dos archivos Lottie del mismo diseñador pueden rendir de forma muy distinta en iPhone, según qué funciones de After Effects usen.

Esto también explica por qué los hilos antiguos de foros sobre Lottie agotando la batería en iOS pueden no describir el comportamiento actual. Antes de migrar una app fuera de Lottie por motivos de rendimiento, revisa qué motor usan realmente tus archivos y qué versión de lottie-ios distribuyes. La solución puede ser una actualización o una exportación más simple en lugar de un formato nuevo.

La prueba de Callstack de 2023 se hizo en Android, así que no indica cómo rinde ninguna de las dos herramientas en un iPhone actual.

¿Cuánto pesan los runtimes de Rive, lottie-web y dotLottie?

El peso del archivo es solo la mitad de la descarga. Cada formato necesita además un reproductor, y el reproductor suele pesar más que la animación.

Hay dos cosas que destacan. Primero, nuestra medición del archivo WASM actual de canvas-lite es mayor que la cifra publicada por Rive, que podría ser anterior a la versión actual. Segundo, lottie-web es el reproductor más pequeño de esta lista, pero su última publicación fue en mayo de 2025, y LottieFiles ahora promueve los reproductores dotLottie, cuyo motor WASM pesa más que lottie-web.

Para una sola animación, el reproductor más ligero suele ganar. Con muchas animaciones, o con un personaje con muchos estados, el ahorro por archivo empieza a compensar el costo del runtime.

¿El renderizador (Canvas2D, WebGL2, Rive Renderer) cambia el resultado?

Sí, y es otra razón por la que una sola prueba de rendimiento rara vez se aplica a otras configuraciones. En la web, los paquetes @rive-app/canvas y canvas-lite de Rive dibujan con la API Canvas2D del navegador, mientras que @rive-app/webgl2 usa el Rive Renderer en la GPU. La documentación de Rive indica que algunas funciones, como Vector Feathering, necesitan el Rive Renderer. En Apple, Android y React Native, el Rive Renderer es el predeterminado.

Lottie también tiene sus variantes. lottie-web puede renderizar en SVG, Canvas o HTML, y cada opción se comporta distinto cuando hay muchas capas. Los reproductores dotLottie renderizan con ThorVG compilado a WASM, y también hay versiones para WebGL y WebGPU. En iOS, lottie-ios elige entre Core Animation y su motor en el hilo principal según cada archivo.

Así que "Rive vs Lottie" es en realidad una comparación entre un paquete, un renderizador y un dispositivo concretos. Una prueba que enfrentó el renderizador por GPU de Rive con el renderizador SVG de lottie-web dice poco sobre canvas-lite frente a dotLottie. Cuando leas una prueba de rendimiento, busca primero los nombres de los paquetes. Si no aparecen, es difícil aplicar el resultado.

Rive también tiene una optimización del runtime que conviene conocer: sus máquinas de estados pueden "asentarse" (settle), es decir, el runtime detecta que nada va a cambiar y deja de avanzar fotogramas. Una animación de Rive en reposo que ya se asentó cuesta muy poco.

¿Cómo hacer una prueba de rendimiento con tu propia animación?

Usa tu animación real en tus dispositivos reales. Una lista breve:

1. Iguala el contenido. Crea o exporta la misma animación en ambos formatos, con el mismo tamaño de artboard y la misma cantidad de cuadros por segundo.
2. Mide la descarga total. Suma el archivo de animación comprimido al runtime comprimido, tal como los sirve tu CDN.
3. Prueba en tu dispositivo objetivo más débil. Un teléfono Android de gama media revela más que un modelo insignia nuevo.
4. Registra cuadros por segundo, CPU y memoria a lo largo del tiempo. Ejecuta cada una durante al menos un minuto. En iOS, incluye backboardd.
5. Prueba tu diseño real. Diez animaciones pequeñas en una página se comportan distinto que una sola grande.
6. Revisa el costo en reposo. Una animación pausada o asentada debería consumir casi nada.

Si eliges un formato para un personaje y no para un solo clip, cuenta también los archivos. Un set de loops y reacciones en un solo archivo de Rive es una sola solicitud y un solo análisis; el mismo set en archivos de Lottie separados implica muchas. Nuestro propio ejemplo: un set de personaje de Charmotion reúne 17 animaciones en un solo .riv de unos 35 a 45 KB para personajes planos (el arte 3D o renderizado pesa más, porque las imágenes van incrustadas), además de copias en MP4, GIF y WebM/MOV con fondo transparente para los lugares donde no se puede cargar ningún runtime.

Para ver las ventajas y desventajas más allá de la velocidad, consulta Rive vs Lottie: cuál usar en 2026.

¿Cuál elegir por rendimiento?

Elige Lottie si publicas una o dos animaciones sencillas en la web, donde el reproductor pequeño de lottie-web es difícil de superar; si tus archivos ya se reproducen en el motor Core Animation de lottie-ios sin recurrir al respaldo; o si el flujo de trabajo de tu equipo se basa en After Effects y las animaciones rinden bien en las pruebas.

Elige Rive si necesitas muchos estados o animaciones de un mismo personaje, si importa el rendimiento en Android de gama baja, o si tu propia prueba reproduce la diferencia de cuadros por segundo que observó Callstack. El ahorro por archivo de Rive y sus máquinas de estados que se asientan rinden más cuando el runtime se comparte entre muchas animaciones.

En cualquier caso, decide con cifras medidas en tu propia app y vuelve a probar después de cada actualización importante del runtime. Ambos proyectos avanzan rápido: el runtime de Rive para React Native se reescribió sobre Nitro Modules, y LottieFiles ahora orienta los proyectos nuevos hacia sus reproductores dotLottie basados en ThorVG. Un resultado de hace dos años puede que ya no describa ninguna de las dos herramientas.

Preguntas frecuentes

¿Rive es más rápido que Lottie?

A menudo sí, pero depende de la animación, el dispositivo y el paquete. La prueba independiente de Callstack de 2023 midió unos 60 FPS con Rive y 17 FPS con Lottie en un Sony Xperia Z3 con React Native, aunque Rive usó algo más de memoria. No encontramos una comparación directa independiente más reciente, así que prueba tus propios archivos.

¿De verdad los archivos de Rive son de 10 a 15 veces más pequeños que los de Lottie?

Esa proporción es una afirmación de Rive, sin metodología publicada. Callstack recreó de forma independiente un Lottie de 24.37 KB como un .riv de 2 KB, lo que apunta en la misma dirección. LottieFiles afirma que los archivos .lottie comprimidos reducen la diferencia. Compara el peso del archivo comprimido más el del runtime con tu propia animación.

¿Qué reproductor web es el más pequeño?

lottie-web, con unos 76 KB en gzip para la versión completa y 46 KB para la versión light, según nuestra medición de octubre de 2026. El paquete web más ligero de Rive, canvas-lite, pesa 222 KB en brotli según las cifras de Rive y unos 373 KB según las nuestras. El reproductor WASM de dotLottie pesa unos 433 KB en brotli.

¿Por qué Lottie parece consumir menos que Rive en Instruments?

El motor Core Animation de Lottie renderiza en el proceso backboardd de Apple, fuera de tu app, mientras que Rive dibuja con Metal dentro de tu app. Si solo perfilas tu app, ocultas parte del costo de Lottie. La documentación de Rive recomienda perfilar también backboardd, una buena práctica para cualquier comparación justa en iOS.

Respuestas rápidas de esta guía

• ¿Rive es más rápido que Lottie?
• ¿Los archivos de Rive pesan menos que los de Lottie?
• ¿Cuánto pesa el runtime de Rive?
• ¿Lottie en iOS sigue consumiendo mucha CPU?

Fuentes

• Lottie vs. Rive: Optimizing Mobile App Animation, Callstack
• Apple runtime: Resource usage, Rive
• Runtime sizes, Rive
• Choose a renderer, Rive
• lottie-ios 4.0.0 release notes, Airbnb (GitHub)
• lottie-web on npm, npm
• @lottiefiles/dotlottie-web on npm, npm
• Rive as a Lottie alternative, Rive