GIF, MP4 o WebM: qué formato usar para bucles

GIF o MP4 se decide por el lugar donde se reproducirá el bucle. En sitios web y redes sociales, el MP4 (y su primo abierto, el WebM) es casi siempre la elección correcta: los archivos suelen ser mucho más pequeños, el color es suave y la reproducción es eficiente. El GIF sigue siendo la elección correcta en un solo lugar, el email, porque la mayoría de las bandejas de entrada muestran GIF animados y muy pocas reproducen vídeo. Todo lo demás de esta guía es detalle sobre esa regla.

Qué es realmente cada formato

El GIF es un formato de imagen de finales de los años ochenta que puede guardar varios fotogramas. Almacena cada fotograma con una paleta de 256 colores como máximo y comprime cada fotograma por su cuenta. El MP4 y el WebM son formatos de vídeo. Usan códecs de vídeo modernos, como H.264 en el MP4 y VP9 o AV1 en el WebM, que guardan lo que cambia entre fotogramas en lugar de cada fotograma completo. Para un bucle en el que la mayor parte de la imagen cambia despacio, esa diferencia es enorme.

Por qué los degradados se ven mal como GIF

Un degradado suave a lo ancho de un fotograma de 1080 píxeles puede usar miles de colores distintos. Un fotograma GIF puede tener 256 como máximo. El codificador tiene dos opciones: redondear los colores al más cercano de la paleta, lo que produce franjas visibles, o esparcir píxeles de colores vecinos para simular los intermedios, lo que se llama tramado y se ve moteado y hace los archivos más grandes. Ninguna se parece al degradado que diseñaste.

El grano ayuda un poco, porque las imágenes con ruido esconden mejor los límites de la paleta que las limpias. Pero la solución real es no usar GIF donde se puede usar vídeo. Bandas en degradados explica el mismo problema en imágenes fijas.

MP4 o WebM para sitios web

Para un sitio web, sustituye los GIF por un elemento de vídeo que se comporte como uno: con reproducción automática, sin sonido, en bucle y en línea. La guía de web.dev sobre sustituir los GIF animados por vídeo explica el enfoque. Ofrece primero el WebM, ya que suele ser más pequeño, y el MP4 como alternativa que se reproduce casi en todas partes.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Vale la pena conocer otros dos formatos. El WebP animado y el AVIF animado son formatos de imagen, que se usan en una etiqueta img normal como un GIF, pero con color completo y una compresión mucho mejor. Los navegadores modernos admiten ambos. Vienen bien donde un CMS o una plataforma solo acepta imágenes, pero no para el email. Para los fondos de ancho completo, lee fondos de vídeo en sitios web.

Bucles para redes sociales

Las plataformas sociales están construidas en torno al vídeo, y el MP4 es el formato que todas aceptan. Donde una plataforma admite la subida de un GIF, a menudo lo trata de forma distinta a un vídeo normal, así que un GIF rara vez es una ventaja. Exporta tu bucle como MP4 al tamaño de la plataforma, en H.264, y deja que la plataforma haga el resto. Publicaciones animadas frente a estáticas cubre tamaños y ajustes.

Bucles en el email: todavía GIF

La mayoría de los clientes de correo no reproducen vídeo, así que un GIF animado es la forma práctica de meter movimiento en un email. Mantenlo pequeño y trata el primer fotograma como la alternativa: algunos clientes, incluidas algunas versiones del Outlook clásico para Windows, muestran solo el primer fotograma. Pon el mensaje en ese fotograma para que no se pierda nada. Nuestras guías de diseño de cabeceras de email y degradados en el correo cubren el resto.

1. 1

   Hazlo corto

   De dos a seis segundos es más que suficiente en un email; cada fotograma añade peso.

2. 2

   Reduce el tamaño y la velocidad de fotogramas

   Exporta al ancho con que se muestra, a menudo 600 píxeles, y a una velocidad de fotogramas menor, como 10 a 15 fotogramas por segundo, para un movimiento lento.

3. 3

   Pon el mensaje en el primer fotograma

   Los lectores que solo vean el primer fotograma deben captar igualmente la idea.

4. 4

   Comprueba el tamaño del archivo

   Los GIF grandes cargan despacio en los móviles. Si pesa mucho, recorta la duración, el tamaño o los colores antes que nada.

Convertir entre GIF y MP4

ffmpeg, una herramienta gratuita de línea de comandos, se encarga de ambas direcciones. Convertir un vídeo en un buen GIF exige una paleta a medida construida a partir del propio vídeo; convertir un GIF en MP4 es más sencillo.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Qué formato usar, de un vistazo

Si haces bucles en Gradiently, el Studio exporta ambos: un vídeo (MP4 donde tu navegador puede grabarlo, WebM en caso contrario) de hasta 1080p, y un GIF con una calidad a elegir que se mantiene por debajo de 15 MB. Asegúrate de que el bucle enlace limpio sea cual sea el que elijas; mira bucles sin costuras.