Lottie vs GIF vs MP4: ¿qué formato de animación elegir?

Tres archivos de la misma animación de diez segundos pueden pesar miles de veces más el uno que el otro, y ninguno de los dos está mal hecho. Comparar Lottie, GIF y MP4 no es ordenar tres calidades: es entender tres formas distintas de guardar movimiento.

Cada una resuelve un problema diferente. Una guarda geometría, otra guarda fotogramas con una paleta corta y la tercera guarda la diferencia entre fotogramas. Elegir mal no estropea el diseño, pero sí lo vuelve inservible en el destino.

Tres sustratos, no tres calidades

Un Lottie es JSON. Describe trazados, colores, capas y keyframes, y necesita un reproductor que lo interprete, no un reproductor de vídeo. Su mejor propiedad es que no tiene rejilla de píxeles: el mismo archivo se dibuja nítido al tamaño que pida la pantalla.

Un GIF es una secuencia de imágenes con una paleta indexada, definida en la especificación GIF89a. Cada fotograma elige sus colores de un máximo de 256 y la transparencia es de un solo bit, es decir, un píxel es opaco o invisible.

Un MP4 es un contenedor de vídeo con compresión entre fotogramas. Guarda un fotograma completo y, en los siguientes, solo lo que cambió. Eso lo hace muy eficiente para movimiento continuo y muy poco útil para animación de formas planas.

Lo que cada uno ocupa

La cuenta del GIF empieza por los fotogramas. Diez segundos a 10 fps son 100 fotogramas, y cada uno arrastra su propia paleta. Con 8 bits por píxel hay 256 colores disponibles frente a los 256³ = 16.777.216 de una imagen de 24 bits: la paleta cubre una de cada 65.536 combinaciones posibles. Ahí está el origen de los degradados escalonados.

La cuenta del MP4 depende de la tasa de bits. Diez segundos a 2 Mbit/s son 2.000.000 × 10 ÷ 8 = 2.500.000 bytes, es decir, 2,5 MB, con independencia de lo que se vea en pantalla.

La cuenta del Lottie no se hace en píxeles. Su peso depende de cuántos trazados, capas y keyframes contiene. Una animación de interfaz con cuatro formas simples puede ser un archivo diminuto y seguir viéndose bien en una pantalla de alta densidad.

Tres ideas falsas que conviene desmontar

La primera es que el GIF es un formato sin pérdida. La compresión dentro de cada fotograma no pierde información, pero la reducción a 256 colores sí, y es irreversible en el archivo final. Un degradado suave se convierte en bandas y no hay ajuste posterior que lo recupere.

La segunda es que un Lottie se reproduce en cualquier sitio. Necesita una biblioteca que lea el JSON y dibuje la animación; un reproductor de vídeo no sirve. Si el destino no puede ejecutar ese código, el formato correcto es otro.

Hay una tercera que aparece en cada entrega con transparencia: el canal alfa dentro de un MP4 con H.264 no es portable. Si el fondo tiene que desaparecer, el contenedor y el códec se eligen pensando en eso desde el principio.

Cuándo elegir cada uno

Lottie cuando la animación vive en una interfaz: carga, transición, confirmación, icono animado. También cuando el tamaño de pantalla es variable y el archivo tiene que acompañar al diseño sin reexportarse.

GIF cuando hace falta un bucle corto que se reproduzca solo en un contexto donde no puedes inyectar código ni vídeo, y el contenido aguanta una paleta reducida. Un contador, un icono de estado, una animación de dos colores.

MP4 cuando hay movimiento fotográfico, degradados amplios, audio o duración. Es la salida natural para redes y plataformas, y la única razonable cuando el material de partida ya son imágenes.

Una regla que resuelve la mayoría de dudas: si el archivo tiene que adaptarse al contenedor donde se muestra, Lottie; si tiene que mostrarse donde no se puede ejecutar nada, GIF; si tiene que reproducirse como vídeo, MP4.

Qué ofrece este editor

El editor importa y exporta Lottie, y guarda sus proyectos en el formato propio .ecproj. La lista de salidas de la cola de render incluye MP4, WebM, GIF y secuencias de imágenes, aunque ninguna de ellas está contrastada por códec en esta compilación. La lista dice qué ofrece la herramienta, no qué se ha comprobado.

Esa distinción importa cuando el archivo tiene que llegar a un cliente concreto. Antes de prometer una salida, conviene exportarla y comprobarla en el reproductor de destino.

Dónde probarlo

El editor de motion graphics y VFX permite construir la misma composición y probar dos entregas distintas sin salir de la pestaña. Para entender qué hay dentro del archivo vectorial, la guía sobre qué es un archivo Lottie lo abre campo por campo. Y si la duda es de disciplina antes que de formato, motion graphics vs animación aclara qué se está comparando.

El formato se elige por lo que el archivo tiene que aguantar en su destino final, no por la fama de sus siglas.