Lottie vs GIF: peso, calidad y dónde funciona cada uno

¿Cuál es la diferencia entre Lottie y GIF?

Un GIF es una secuencia de fotogramas de mapa de bits que cualquier visor de imágenes puede mostrar. Un archivo Lottie es una descripción de formas vectoriales y keyframes, exportada originalmente desde After Effects con el plugin Bodymovin, que una biblioteca reproductora dibuja en runtime en web, iOS, Android, React Native y Windows. La variante dotLottie (.lottie) comprime ese JSON en un zip y puede empaquetar varias animaciones, temas y máquinas de estados (state machines).

La tabla ya adelanta la respuesta: los dos formatos solo compiten en los espacios que tú controlas. En todos los demás, GIF es el único de los dos que se reproduce.

¿Lottie siempre pesa menos que un GIF?

A menudo, pero no siempre, y la comparación necesita dos cifras: el archivo de la animación y el reproductor.

En animaciones vectoriales planas, la diferencia de peso puede ser grande. LottieFiles cita el caso de The Washington Post, que reemplazó un GIF de 2 MB por un JSON de Lottie de 385 KB; es un ejemplo publicado por el proveedor, no una prueba independiente. La razón es estructural: un GIF guarda píxeles de cada fotograma, así que su peso crece con las dimensiones y la duración, mientras que un archivo Lottie guarda formas y keyframes, así que su peso crece con la complejidad del arte.

Esto se invierte cuando el Lottie contiene mapas de bits incrustados, muchas capas o secuencias largas fotograma a fotograma. Un Lottie que envuelve fotos es simplemente un GIF más pesado con un runtime añadido.

Luego suma el reproductor. Según la medición de Charmotion a partir del paquete de npm el 12 de octubre de 2026, lottie-web 5.13.0 pesa unos 76 KB comprimido con gzip en la versión completa y 46 KB en la versión ligera. El reproductor más reciente de LottieFiles, dotlottie-web, carga un motor WebAssembly que midió unos 433 KB con brotli, más unos 23 KB de JavaScript. Para una sola animación pequeña en una página, el reproductor puede pesar más que el GIF; con muchas animaciones, el costo se amortiza rápido.

GIF tampoco es eficiente. En el ejemplo de web.dev, un GIF de 3.7 MB pasó a ser un MP4 de 551 KB y un WebM de 341 KB, por eso el video suele ser mejor reemplazo para contenido rasterizado.

¿Por qué los GIF se ven dentados sobre fondos transparentes?

La transparencia de GIF es binaria. MDN la describe como un único índice de la paleta totalmente transparente, sin alfa parcial. Un borde con antialiasing necesita píxeles semitransparentes para fundirse con lo que haya detrás, y GIF no puede almacenarlos.

Los exportadores lo resuelven mezclando el borde con un color mate fijo, normalmente blanco. Se ve bien en una página blanca y deja un halo claro en una oscura. Sin color mate, el borde queda escalonado. En cualquier caso, un GIF transparente solo se ve bien sobre el fondo para el que se hizo.

Lottie dibuja formas vectoriales sobre un canvas o SVG transparente, así que el antialiasing de los bordes se calcula contra el fondo real en el momento de mostrarse. El mismo archivo queda limpio sobre una tarjeta clara, una sección hero oscura o un degradado.

El límite de 256 colores añade un segundo artefacto: los degradados, las sombras suaves y el arte renderizado en 3D muestran bandas o tramado. Lottie no tiene límite de paleta para los rellenos vectoriales. Sin embargo, si tu arte es fotográfico, ninguno de los dos formatos es ideal; un WebM transparente más un .mov HEVC conservan el color completo y un canal alfa real.

¿Dónde no puedes usar Lottie?

En cualquier lugar que muestre imágenes pero no ejecute tu código. Un archivo Lottie son datos; algo tiene que ejecutar un reproductor para convertirlo en píxeles. Eso lo descarta en:

• Correo electrónico. Los clientes de correo no ejecutan scripts en los mensajes, así que no hay forma de cargar un reproductor de Lottie. GIF es la opción estándar para la animación en el correo.
• Chats y publicaciones en redes sociales. Las herramientas de mensajería y las redes sociales aceptan imágenes y archivos de video, no un JSON cualquiera con un reproductor.
• Documentos, presentaciones y archivos README que aceptan imágenes pero no scripts.
• Campos de CMS limitados a imágenes, a menos que la plataforma añada su propio elemento de Lottie, como hacen Webflow y Wix.

Dentro de tu propio sitio web o app, Lottie funciona donde haya un reproductor instalado. En esos casos, la pregunta pasa a ser Lottie, video o Rive, algo que GIF vs WebM vs MP4 vs Lottie vs Rive analiza formato por formato.

Mantén los GIF para correo cortos, livianos y legibles desde el primer fotograma, porque algunos clientes solo muestran ese fotograma.

¿Lottie consume CPU que un GIF no consume?

Sí, en principio. Un navegador decodifica un GIF de forma nativa. Un reproductor de Lottie evalúa formas y keyframes y los vuelve a dibujar en cada fotograma, con JavaScript en la web (lottie-web renderiza en SVG, canvas o HTML) o con código nativo en móviles.

Cuánto importa eso depende de la plataforma y del archivo:

• iOS. lottie-ios 4.0 convirtió su motor de renderizado basado en Core Animation en el predeterminado para las animaciones compatibles, así que la reproducción ya no hace trabajo por fotograma en el hilo principal. Las animaciones que usan funciones no compatibles recurren al motor anterior en el hilo principal, que según InfoQ podía consumir entre un 5% y un 20% de CPU o más.
• React Native en Android. En la prueba de Callstack de enero de 2023 en un viejo Sony Xperia Z3, una animación Lottie se reprodujo a unos 17 FPS. Es un solo dispositivo y un solo archivo, así que tómalo como una advertencia sobre hardware de gama baja, no como una regla general.

Algunos hábitos prácticos cierran casi toda la brecha: pausa las animaciones que están fuera de pantalla, evita decenas de reproductores simultáneos y mantén bajo el número de capas y máscaras. Un GIF no ofrece estos ajustes, pero también sigue decodificándose mientras está visible y no se puede pausar sin reemplazar la imagen.

¿Cuándo un video supera a ambos?

Cuando el arte es rasterizado: fotos, renders 3D, ilustración pintada o grabaciones de pantalla. Los códecs de video guardan sobre todo lo que cambia entre fotogramas, así que comprimen ese tipo de contenido mucho mejor que GIF, y un formato vectorial directamente no puede representarlo de forma eficiente.

web.dev recomienda reemplazar los GIF animados de las páginas web por un elemento <video autoplay loop muted playsinline>, que se comporta como un GIF y descarga una fracción de los bytes. Para un overlay transparente, sirve un .mov HEVC con alfa para Safari y un WebM VP9 para los demás navegadores; en Video con fondo transparente en sitios web encontrarás el código.

Dentro de las apps, el video comparte la principal limitación de GIF: puede reproducirse, pausarse y saltar a un punto, pero no puede reaccionar a estados. Si la animación tiene que cambiar entre carga, éxito y error, una máquina de estados en Lottie (con dotLottie) o en Rive es la mejor opción.

Una regla útil: vectorial e interactivo dentro de tu producto, video para clips rasterizados en espacios que controlas, y GIF solo donde ninguno de los otros pueda reproducirse.

¿Lottie o GIF: cuál elegir?

Elige Lottie si:

• la animación se reproduce dentro de tu propio sitio web o app, donde puedes cargar un reproductor;
• el arte es ilustración vectorial plana, íconos o animación de interfaz;
• debe verse sobre distintos fondos o escalar en diferentes densidades de pantalla;
• necesitas control de reproducción o un comportamiento basado en estados con las máquinas de estados de dotLottie;
• tu equipo ya produce animación en After Effects o Lottie Creator.

Elige GIF si:

• el destino es un correo, una app de chat, un documento o cualquier espacio que muestre imágenes pero no ejecute código;
• necesitas un solo archivo que funcione sin ninguna integración;
• el clip es lo bastante corto y pequeño como para que el peso extra del GIF no importe.

Si ninguna de las dos listas encaja, porque el contenido es rasterizado o debe ser transparente a todo color, usa video. Muchos equipos usan los tres: Lottie en el producto, video en el sitio de marketing y GIF en el correo.

¿Cómo publicar ambos desde un mismo origen?

Mantén una animación maestra y genera el GIF a partir de ella, en lugar de mantener dos versiones hechas a mano que terminan siendo distintas. Con After Effects, exporta el Lottie con Bodymovin y renderiza un video para el GIF; con Lottie Creator, usa sus opciones de exportación. Luego convierte el video a GIF con una paleta generada, que se ve mucho mejor que una conversión predeterminada:

ffmpeg -i loop.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" loop.gif

Si el archivo pesa demasiado, baja primero los cuadros por segundo y el ancho; ambos reducen un GIF más rápido que cualquier otro ajuste.

Para un personaje o mascota en concreto, Charmotion toma el camino opuesto: subes el personaje, la mascota o el logo y normalmente recibes 17 animaciones en minutos como un solo archivo Rive, además de exportaciones bajo demanda de MP4, GIF y WebM y MOV transparentes, en todos los planes de pago. No produce archivos Lottie, así que si tu producto usa Lottie como estándar, mantén tu flujo actual y usa el paso de ffmpeg de arriba para el GIF.

Preguntas frecuentes

¿Puedo usar una animación Lottie en un correo?

No de forma fiable. Los clientes de correo no ejecutan scripts, así que no hay forma de cargar el reproductor que necesita un archivo Lottie. Para el correo, exporta la animación como GIF, mantenla corta y liviana, y asegúrate de que el primer fotograma funcione por sí solo, porque algunos clientes solo muestran ese fotograma.

¿Cómo convierto un GIF a Lottie?

Por lo general, no se puede convertir de forma limpia. Un GIF son fotogramas de mapa de bits y Lottie son formas vectoriales, así que un archivo convertido solo inserta los fotogramas como imágenes y conserva las limitaciones del GIF. Para obtener mejoras reales, reconstruye la animación como vectores en After Effects o Lottie Creator, o usa un formato de video para contenido rasterizado.

¿Lottie admite transparencia?

Sí. Los reproductores de Lottie dibujan formas vectoriales sobre un canvas o un SVG transparente, así que los bordes se suavizan con antialiasing contra lo que haya detrás. El GIF solo tiene transparencia de 1 bit, lo que provoca bordes dentados o un halo del color mate usado al exportar. Lottie se ve limpio sobre fondos claros, oscuros y con degradado.

¿Lottie es mejor que GIF para la velocidad de carga de un sitio web?

Normalmente sí, si muestras varias animaciones, porque los archivos vectoriales son pequeños y un solo reproductor los sirve todos. Para una única animación diminuta, la biblioteca del reproductor puede pesar más que el GIF. Mide el archivo más el reproductor, y considera un video MP4 o WebM cuando el arte sea rasterizado.

Respuestas rápidas de esta guía

• ¿Lottie pesa menos que un GIF?
• ¿Se pueden usar animaciones Lottie en el correo electrónico?

Fuentes

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• lottie-web, Airbnb on GitHub
• lottie-web package, npm
• @lottiefiles/dotlottie-web package, npm
• Lottie vs GIF, LottieFiles
• lottie-ios 4.0.0 release notes, Airbnb on GitHub
• Lottie vs Rive: optimizing mobile app animation, Callstack