¿Qué diferencia hay entre un GIF y un vídeo?
Un GIF es un archivo de imagen que contiene una serie de fotogramas y un retardo para cada uno. Los navegadores y las apps lo muestran como una imagen: empieza solo, se repite en bucle y no tiene sonido ni controles.
Un archivo de vídeo, como un MP4, contiene fotogramas comprimidos con un códec (normalmente H.264) y una pista de audio opcional. Un reproductor lo muestra con controles para pausar, avanzar y ajustar el volumen.
Así que un GIF es una animación, pero no un vídeo. Muchos sitios llaman “GIF” a los bucles cortos sin sonido aunque sirvan archivos MP4, porque la experiencia parece la misma.
Comparativa directa
| Característica | GIF | MP4 (H.264) |
|---|---|---|
| Compresión | Por fotograma (LZW, sin compresión temporal) | Temporal (predicción entre fotogramas) |
| Colores | 256 por fotograma | 16,7 millones |
| Tamaño de una animación de 5 s | 3–10 MB | 200–500 KB |
| Ahorro habitual | — | Entre un 90 y un 95 % menos |
| Audio | Ninguno | Opcional (AAC) |
| Transparencia | 1 bit (sí/no) | No admitida (H.264) |
| Velocidad de fotogramas máx. | ~50 fps (aunque normalmente 10–15) | 60+ fps |
| Reproducción automática en la web | Automática (siempre) | Con los atributos autoplay+muted |
| Bucle | Indicador de bucle integrado | Mediante el atributo loop en HTML |
| Compatibilidad con navegadores | 100 % (desde 1995) | 100 % (vídeo HTML5) |
| Compatibilidad con correo | La mayoría de los clientes (Outlook antiguo: solo el primer fotograma) | Casi ninguna |
| Puntuación de Lighthouse | Marcado como problema | Alternativa recomendada |
Por qué el GIF es tan ineficiente
El GIF fue diseñado en 1987 para imágenes estáticas. El soporte de animación se añadió en 1989 como GIF89a, pero la compresión nunca fue pensada para contenido en movimiento. Estas son las razones por las que los archivos GIF son enormes:
- Sin compresión temporal: cada fotograma se guarda como una imagen completa. Si tienes 150 fotogramas de un gato saludando, el GIF guarda 150 imágenes distintas. Los codificadores pueden omitir las zonas que no cambian, pero todo lo que se mueve se vuelve a guardar en cada fotograma.
- Límite de 256 colores: cada fotograma solo puede usar 256 colores de una paleta. El contenido fotográfico requiere tramado (patrones de píxeles que simulan los colores que faltan), lo que en realidad aumenta el tamaño del archivo, porque los patrones tramados se comprimen mal.
- Solo compresión LZW: GIF usa compresión solo espacial (dentro de cada fotograma). MP4 usa compresión espacial y temporal (entre fotogramas), muchísimo más eficiente para la animación.
MP4 con H.264 resuelve los tres problemas: almacena solo lo que cambia entre fotogramas, admite 16,7 millones de colores y usa la compresión de vídeo más avanzada disponible. El resultado son archivos un 90–95% más pequeños con mejor calidad visual.
Impacto en el rendimiento web
La diferencia de rendimiento entre GIF y MP4 en un sitio web es drástica y medible:
| Métrica | Página con GIF de 5 MB | Página con MP4 de 400 KB |
|---|---|---|
| Tiempo de carga (4G) | ~4 segundos | ~0,3 segundos |
| Tiempo de carga (3G) | ~15 segundos | ~1,2 segundos |
| Ancho de banda por 100K vistas | 500 GB | 40 GB |
| Rendimiento Lighthouse | Advertencia señalada | Sin problemas |
| Impacto en LCP | Significativo (retrasa pintura) | Mínimo |
| Uso de datos móviles | 5 MB por visita | 0,4 MB por visita |
Google Lighthouse
La auditoría Lighthouse de Google señala explícitamente los GIF animados con la recomendación: “Usa formatos de vídeo para contenido animado.” No es una sugerencia — está clasificada como una “oportunidad” con el ahorro estimado visible. Corregir esta recomendación mejora directamente tu puntuación de rendimiento.
Core Web Vitals
Un GIF grande afecta a dos Core Web Vitals que Google usa para los rankings de búsqueda:
- Largest Contentful Paint (LCP): si el GIF es el elemento más grande por encima del pliegue, retrasa el LCP hasta que se descarga y decodifica el GIF completo. Un GIF de 5 MB en móvil puede empujar el LCP más allá del umbral de 2,5 segundos.
- Cumulative Layout Shift (CLS): si no se especifican las dimensiones del GIF, el diseño de la página se desplaza cuando el GIF se carga y se expande a su tamaño completo.
Cómo reemplazar GIF por MP4 en tu sitio web
El HTML para que un MP4 se comporte exactamente como un GIF animado:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Cada atributo tiene un propósito específico:
autoplay— inicia la reproducción automáticamente al hacerse visibleloop— reinicia al llegar al final (como el GIF)muted— sin sonido (requerido por todos los navegadores para que el autoplay funcione)playsinline— se reproduce en línea en lugar de pantalla completa en Safari móvil
La experiencia de usuario es idéntica a un GIF: la animación se reproduce automáticamente, se repite en bucle y no emite sonido. Pero el archivo es 10–20 veces más pequeño y la calidad es mejor.
Con fallback a WebM para archivos aún más pequeños
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
WebM (VP9) suele ser un 20–30% más pequeño que MP4 (H.264). Los navegadores compatibles con WebM lo usarán; el resto recurrirá al MP4. Juntos tienen una cobertura del 100% de navegadores.
Cuándo seguir usando GIF
A pesar de su ineficiencia, el GIF sigue siendo la opción correcta en situaciones concretas:
Email marketing
Los clientes de correo HTML casi no admiten vídeo. Ni etiqueta <video>, ni reproducción automática, ni MP4. El GIF es la única forma de incluir contenido animado en un correo. La mayoría de los clientes de correo reproducen GIF animados; Outlook 2007–2019 para Windows solo muestra el primer fotograma. No hay alternativa para este caso de uso.
Plataformas de mensajería
Slack, Discord, Microsoft Teams y WhatsApp tienen funciones dedicadas de GIF con previsualización en línea, búsqueda (vía GIPHY/Tenor) y renderizado especial. Subir un MP4 a estas plataformas funciona, pero no activa la misma experiencia de GIF en línea. Si la plataforma espera GIF, usa GIF.
Iconos animados simples y elementos de UI
Las animaciones muy pequeñas y sencillas (spinners de carga, marcas de verificación, microinteracciones) de menos de 50 KB son aceptables como GIF. La diferencia de tamaño es insignificante, y la sencillez del GIF (no se necesita elemento <video>, funciona en etiqueta <img>) resulta cómoda para los desarrolladores.
Requisitos de transparencia
El GIF admite transparencia de 1 bit (completamente transparente u opaco). MP4 H.264 no admite transparencia en absoluto. Si necesitas una superposición animada sobre un fondo variable, GIF o WebP/AVIF animado son tus opciones. Ten en cuenta que la transparencia de 1 bit del GIF crea bordes dentados — para animaciones transparentes suaves, WebM (alfa VP9) es superior.
Otros formatos animados
| Formato | Tamaño (anim. 5 s) | Colores | Transparencia | Soporte en navegadores |
|---|---|---|---|---|
| GIF | 3–10 MB | 256 | 1 bit | 100% |
| MP4 (H.264) | 200–500 KB | 16,7M | No | 100% |
| WebM (VP9) | 150–400 KB | 16,7M | Canal alfa | ~96% |
| WebP animado | 500 KB–2 MB | 16,7M | Canal alfa | ~97% |
| Secuencia AVIF | 100–300 KB | 16,7M | Canal alfa | ~95% |
| APNG | 2–8 MB | 16,7M | Alfa completo | ~96% |
| Lottie (JSON) | 5–50 KB | Ilimitados | Sí | Vía biblioteca JS |
Mejor sustituto general del GIF en la web: MP4 (H.264) — soporte universal, tamaño de archivo más pequeño en la práctica, excelente calidad. Añade WebM como fuente principal para archivos aún más pequeños.
Mejor para animación transparente: WebM (alfa VP9) o WebP animado.
Mejor para animación vectorial (iconos, ilustraciones): Lottie — escalado infinito, archivos increíblemente pequeños, pero requiere un entorno de ejecución JavaScript.
Lista de verificación: migración de GIF a MP4
Si vas a reemplazar GIFs en un sitio web existente:
- Auditoría: localiza todos los GIF animados de tu sitio. Comprueba los tamaños de archivo — prioriza los GIFs de más de 500 KB.
- Conversión: usa nuestro conversor o FFmpeg (
ffmpeg -i anim.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4). - Reemplaza el HTML: cambia
<img src="anim.gif">por<video autoplay loop muted playsinline>. - Añade dimensiones: incluye los atributos
widthyheighten el elemento de vídeo para evitar el desplazamiento de diseño (CLS). - Verifica: prueba la reproducción automática en Chrome, Firefox, Safari y navegadores móviles.
- Mide: ejecuta Lighthouse antes y después para confirmar la mejora de rendimiento.
Cómo convertir un GIF en vídeo (y viceversa)
GIF a MP4 (esta página)
- Sube el GIF en el convertidor de arriba.
- Convierte. Se conservan todos los fotogramas y se codifican con H.264 (CRF 23, optimizado para animación) en un MP4 preparado para empezar a reproducirse antes de descargarse por completo.
- Descarga el MP4. No tiene pista de audio, porque los GIF no la tienen.
Vídeo a GIF
Usa el convertidor de MP4 a GIF. Conserva los primeros 30 segundos a 480 px de ancho y 10 fotogramas por segundo.
FFmpeg
El comando de GIF a MP4 que se usa aquí: ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -crf 23 -tune animation output.mp4. El filtro scale redondea el ancho y el alto a números pares, algo que H.264 necesita con este formato de píxel.