Ir al contenido
charmotion
Empieza ahora

GIF vs WebM vs MP4 vs Lottie vs Rive

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: GIF vs WebM vs MP4 vs Lottie vs Rive, con personajes de demostración de Charmotion

Usa MP4 para redes sociales, presentaciones y cualquier lugar que acepte video; usa GIF solo donde el video no se reproduce, como en muchos clientes de correo. Usa WebM con VP9 más MOV con HEVC para overlays web transparentes, y Rive o Lottie para animación interactiva basada en estados dentro de apps y sitios. GIF es la opción más pesada y de menor calidad.

Puntos clave

  • GIF está limitado a 256 colores y transparencia de 1 bit, y suele pesar varias veces más que el video.
  • MP4 (H.264) se reproduce casi en todas partes, pero no puede ser transparente.
  • El video web transparente necesita dos archivos: WebM con VP9 para Chromium y Firefox, y MOV con HEVC para Safari.
  • Rive y Lottie son formatos vectoriales que reproduce un runtime; ambos ya admiten máquinas de estados.
  • Elige según el destino: dónde se reproduce, si necesita transparencia y si debe reaccionar al usuario.

¿Qué formato de animación debo usar?

Empieza por dónde se va a reproducir la animación, luego si necesita fondo transparente y después si debe responder al usuario. Eso suele reducir la elección a uno o dos formatos.

FormatoTransparenciaInteractividadUso habitualCompatibilidad
GIFSolo 1 bit (activado o desactivado)NingunoCorreo, chat, embeds antiguosUniversal
MP4 (H.264)NingunoNingunoRedes sociales, presentaciones, videos de producto, loops web opacosUniversal
WebM (VP9)Alfa completoNingunoOverlays web con fondo transparenteChrome, Edge, Firefox; Safari lo reproduce sin alfa
MOV (HEVC con alfa)Alfa completoNingunoVideo con fondo transparente para Safari, iOS y apps de ApplePlataformas de Apple (iOS 13+, macOS Catalina+)
Lottie / dotLottieSí (vectorial)Sí, con máquinas de estados de dotLottieÍconos e ilustraciones de interfaz desde After EffectsReproductores para web, iOS, Android, React Native y Windows
Rive (.riv)Sí (vectorial)Sí, máquina de estados integradaPersonajes e interfaz interactivos en apps y sitiosRuntimes para web, React, Apple, Android, Flutter y React Native

Los formatos de video son autónomos: cualquier reproductor los muestra sin código adicional. Lottie y Rive necesitan una biblioteca de runtime, pero a cambio escalan a cualquier tamaño sin verse borrosos y pueden reaccionar al estado de la app.

¿Cuáles son las limitaciones de GIF?

GIF es un formato de color indexado. Cada fotograma usa una paleta de 256 colores como máximo, así que los degradados, las sombras suaves y el arte renderizado en 3D muestran bandas o tramado visibles.

Su transparencia es binaria. MDN la describe como un índice de la paleta que es totalmente transparente, sin alfa parcial. Cada píxel del borde es completamente opaco o completamente transparente, lo que deja un contorno dentado o con halo cuando el GIF se coloca sobre un fondo distinto al que se usó al crearlo.

Comparación ampliada de un borde suave con canal alfa y un borde dentado de GIF de un bit sobre un degradado

GIF además comprime mal el movimiento. 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. MDN recomienda formatos modernos como WebP animado, AVIF o APNG para secuencias de imágenes en la web.

GIF todavía gana en algo: se reproduce casi en cualquier lugar donde se pueda mostrar una imagen, incluidos los clientes de correo y las herramientas de chat antiguas que no reproducen video.

¿Por qué el video pesa menos que un GIF?

Los códecs de video modernos guardan sobre todo lo que cambia entre fotogramas, con predicción de movimiento y compresión con pérdida ajustada a la percepción humana. GIF comprime cada fotograma por separado con LZW sin pérdida y una paleta limitada, así que un clip corto a un tamaño razonable se vuelve pesado rápidamente.

La recomendación de web.dev es reemplazar los GIF animados por un video que se comporte como uno:

<video autoplay loop muted playsinline poster="/media/loop.jpg">
  <source src="/media/loop.webm" type="video/webm">
  <source src="/media/loop.mp4" type="video/mp4">
</video>

Esos cuatro atributos reproducen el comportamiento de un GIF: empieza al cargar, se repite, no tiene sonido y se reproduce dentro de la página en iPhone. La reproducción automática sin sonido está permitida en Chrome y en Safari para iOS.

Gráfico de barras con pesos de archivo reales de un set de 17 animaciones: Rive 40 KB frente a MP4 de 2.6 MB, WebM con fondo transparente de 6.1 MB, GIF de 8.0 MB y MOV HEVC de 9.4 MB
Pesos de archivo de un set real de Charmotion (Pip). Los pesos de video corresponden a una sola animación de 4 segundos.

Los números reales de un set de Charmotion muestran el mismo patrón. Un loop en reposo de 4 segundos pesa 208 KB como MP4 de 1080×1080 a 60 fps y 700 KB como GIF de 480 px, así que el GIF pesa más del triple con menos de la mitad del ancho.

¿Qué formatos admiten transparencia?

Cinco de los seis formatos admiten transparencia, pero de maneras muy distintas:

  • WebM con VP9 (o VP8) incluye un canal alfa completo. Chrome, Edge y Firefox lo muestran; Safari reproduce el video, pero descarta el canal alfa.
  • HEVC con alfa en un .mov incluye un canal alfa completo en plataformas de Apple, incluido Safari en iOS 13+ y macOS Catalina+.
  • Rive y Lottie dibujan formas vectoriales sobre un lienzo transparente, así que la transparencia viene por defecto.
  • GIF admite un solo color totalmente transparente, lo que produce bordes duros.
  • MP4 H.264 no tiene canal alfa.

Para un video con fondo transparente que funcione en todos los navegadores principales, sirve primero el archivo HEVC y después el WebM dentro de un único elemento <video>. El marcado completo y los comandos de codificación están en Video con fondo transparente en sitios web.

¿Cuándo conviene más Rive o Lottie que un video?

Cuando la animación tiene que reaccionar. Un video solo puede reproducirse, pausarse y saltar a otro punto. Un archivo Rive o Lottie puede cambiar de estado según la entrada que recibe de tu código: una mascota de marca que se mueve en loop mientras algo carga y luego reproduce una reacción de éxito cuando termina la solicitud.

Lottie reproduce animaciones de After Effects exportadas como JSON con el plugin Bodymovin, y tiene reproductores para web, iOS, Android, React Native y Windows. El contenedor dotLottie (.lottie) comprime ese JSON y puede agrupar varias animaciones, temas y máquinas de estados. LottieFiles agregó máquinas de estados sin código a Lottie Creator en 2025, así que "Lottie no es interactivo" ya no es correcto.

Los archivos Rive se diseñan en el editor de Rive y se exportan como un .riv binario con una máquina de estados (state machine) en el centro del formato. Los runtimes oficiales de Rive son de código abierto bajo la licencia MIT. El blog de Rive menciona un Lottie de 240 KB recreado como un .riv de 16 KB; es un ejemplo del propio fabricante, no una prueba independiente.

Ambos necesitan un reproductor. El runtime web de Rive pesa aproximadamente entre 222 y 648 KB comprimido con brotli, según el paquete, así que para un solo loop decorativo el video suele ser más liviano en total. Para una comparación más detallada, consulta Rive vs Lottie.

¿Qué formato usar para email, redes sociales, presentaciones y apps?

  • Publicaciones en redes y anuncios: MP4. Un MP4 en 1080×1080 o 9:16 se acepta en todas partes.
  • Presentaciones y documentos: MP4 por calidad. Usa GIF solo si la herramienta no permite insertar video.
  • Email: GIF, porque muchos clientes de correo no reproducen video. Mantenlo corto y liviano, y haz que el primer fotograma funcione como imagen fija.
  • Loops web sin transparencia: MP4 (y, si quieres, WebM) en un elemento <video autoplay loop muted playsinline> en lugar de un GIF.
  • Overlays web transparentes: MOV HEVC más WebM VP9.
  • Interfaces interactivas de web y apps: Rive o Lottie, controlados desde tu código. Consulta Rive en React y Next.js y Rive en SwiftUI.

Si no estás seguro, empieza por la restricción más estricta del destino. El email descarta el video, un overlay transparente descarta el MP4 y una reacción a la interacción del usuario descarta todos los formatos de video. Lo que queda suele ser la respuesta.

La mayoría de los productos terminan usando más de uno. Una mascota puede vivir en la app como archivo Rive, en el sitio de marketing como video con fondo transparente y en los emails de onboarding como GIF. Generar todas las exportaciones desde la misma fuente evita diferencias entre ellas.

Preguntas frecuentes

¿WebM es mejor que MP4?

Para la web, WebM (VP9) suele comprimir mejor y admite transparencia con canal alfa, mientras que MP4 H.264 tiene la compatibilidad más amplia y no admite transparencia. Sirve WebM y MP4 juntos y deja que el navegador elija. Para redes sociales y presentaciones, MP4 es la opción única más segura.

¿Por qué mi GIF transparente tiene un borde blanco o dentado?

GIF solo admite transparencia de 1 bit, así que cada píxel es totalmente opaco o totalmente transparente. Los bordes suavizados (antialiasing) quedan fundidos con el color de fondo usado al exportar. Para bordes limpios, usa un WebM transparente más un MOV HEVC, o un formato vectorial como Rive o Lottie.

¿Las animaciones Lottie pueden ser interactivas?

Sí. Los reproductores de Lottie ofrecen control de reproducción desde hace tiempo y, desde 2025, Lottie Creator de LottieFiles permite crear máquinas de estados sin código que se incluyen en un archivo dotLottie y se ejecutan en el reproductor dotLottie. Rive ofrece una lógica similar con su máquina de estados integrada.

¿Un archivo Rive siempre pesa menos que un video?

El .riv en sí suele pesar mucho menos, a menudo decenas de kilobytes para muchas animaciones. Pero el runtime web agrega aproximadamente entre 222 y 648 KB comprimido, según la tabla de pesos de Rive. Para un loop decorativo corto, un MP4 puede ser más liviano en total; para muchos estados, Rive suele ganar.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas