# GIF, MP4 o WebM: qué formato usar para bucles [Canonical HTML page](https://gradiently.design/es/guide/gif-vs-mp4) El GIF es el formato que todos conocen y que casi nadie debería usar en la web. También es el único que funciona en una bandeja de entrada. Aquí tienes cuál elegir, dónde y por qué. ## The short version - Para sitios web y redes sociales, el MP4 y el WebM suelen ser mucho más pequeños que el GIF para el mismo bucle y muestran un color suave. - El GIF puede mostrar como máximo 256 colores en cada fotograma, lo que hace que los degradados formen bandas o se vean moteados. - El GIF sigue siendo la opción práctica para la animación en el email, porque la mayoría de los clientes de correo no reproducen vídeo. - El WebM suele ser más pequeño que el MP4, pero el MP4 se reproduce casi en todas partes, así que los sitios web suelen ofrecer ambos. - El WebP animado y el AVIF son formatos de imagen modernos que sustituyen al GIF en los sitios web, pero no son una opción segura para el email. **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. | Rasgo | GIF | MP4 | WebM | | --- | --- | --- | --- | | Colores | Hasta 256 por fotograma | Millones | Millones | | Tamaño de archivo de un bucle | El mayor | Pequeño | A menudo el menor | | Transparencia | Sí o no por píxel, sin bordes suaves | No | Sí, en algunos navegadores | | Sonido | No | Sí | Sí | | Sitios web | Sí, como imagen | Sí, como vídeo | Sí, en navegadores modernos | | Email | La mayoría de los clientes | Rara vez | Rara vez | | Subidas a redes sociales | Varía según la plataforma | En todas partes | Algunas plataformas | El panorama general. La compatibilidad con plataformas y bandejas concretas cambia, así que comprueba el lugar donde vas a publicar. ## 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. - Suave: como se diseñó: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)` - Escalonado: pocos colores: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #36207a 12.5% 25%, #4f24a7 25% 37.5%, #6d28d9 37.5% 50%, #8e3bd0 50% 62.5%, #b04ec6 62.5% 75%, #d261bd 75% 87.5%, #f472b6 87.5% 100%)` Una vista exagerada de lo que hace una paleta limitada a un degradado. Los GIF reales tienen más escalones, pero en degradados oscuros y sutiles las bandas siguen notándose. 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](https://gradiently.design/es/guide/gradient-banding) 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](https://web.dev/articles/replace-gifs-with-videos) 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. ```html ``` Un vídeo que se comporta como un GIF. El ancho y el alto evitan que la composición salte mientras carga. 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](https://gradiently.design/es/guide/video-background-website). ## 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](https://gradiently.design/es/guide/animated-social-posts) 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](https://gradiently.design/es/guide/email-header-design) y [degradados en el correo](https://gradiently.design/es/guide/gradients-in-email) cubren el resto. 1. **Hazlo corto** De dos a seis segundos es más que suficiente en un email; cada fotograma añade peso. 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. **Pon el mensaje en el primer fotograma** Los lectores que solo vean el primer fotograma deben captar igualmente la idea. 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. ```bash # 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 ``` `palettegen` y `paletteuse` eligen los 256 colores que convienen a este clip, que es la mayor mejora individual de la calidad de un GIF. ## Qué formato usar, de un vistazo | Dónde se reproduce | Usa | Por qué | | --- | --- | --- | | Portada o fondo de un sitio web | WebM con MP4 de reserva | Los archivos más pequeños, color suave | | Animación en línea en un artículo | Vídeo MP4, o WebP animado | Mucho más ligero que un GIF | | Instagram, TikTok, LinkedIn, X | MP4 (H.264) | Lo que esperan las plataformas | | Email | GIF | La animación que muestran casi todas las bandejas | | Apps de chat y stickers | Lo que pida la app | Cada app tiene sus propias reglas | 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](https://gradiently.design/es/guide/seamless-loop-video). ## FAQ ### ¿Es mejor el MP4 que el GIF? Para sitios web y redes sociales, sí: los archivos MP4 suelen ser mucho más pequeños y muestran un color suave, mientras que el GIF está limitado a 256 colores por fotograma. El GIF sigue siendo la mejor opción para el email. ### ¿Por qué mis GIF con degradado se ven a rayas? El GIF puede tener como máximo 256 colores por fotograma, así que los degradados suaves se redondean en bandas o se tramán en motas. Usa vídeo donde puedas, o construye una paleta a medida al exportar. ### ¿Debo usar WebM o MP4? En sitios web, ofrece primero el WebM porque suele ser más pequeño, con el MP4 como alternativa porque se reproduce casi en todas partes. Para subidas a redes sociales, usa MP4. ### ¿Puedo poner un vídeo en un email? Muy pocos clientes de correo reproducen vídeo. Usa un GIF animado, mantenlo pequeño y asegúrate de que el primer fotograma lleve el mensaje, ya que algunos clientes muestran solo ese fotograma. ### ¿Qué es el WebP animado? Es un formato de imagen que puede guardar animación con color completo y mejor compresión que el GIF. Los navegadores modernos lo admiten, pero los clientes de correo en general no.