Cómo comprimir vídeo para la web

¿Por qué comprimir vídeo para la web?

El vídeo sin procesar que sale directo de una cámara, un teléfono o un grabador de pantalla está pensado para editar, no para la web. Un solo clip puede pesar decenas o cientos de megabytes, mucho más de lo que una página debería enviar jamás. Cada uno de esos bytes tiene que llegar al visitante antes de que el vídeo pueda reproducirse, y con datos móviles eso es lento y caro.

El vídeo pesado es uno de los mayores lastres para los Core Web Vitals. Un archivo demasiado grande en la parte visible de la página retrasa el Largest Contentful Paint, y un reproductor que cambia de tamaño mientras carga perjudica el Cumulative Layout Shift; ambas son señales de posicionamiento que Google mide en visitantes reales. Comprimir el archivo, fijar dimensiones explícitas y aplazar el vídeo que queda fuera de pantalla mantiene esas puntuaciones en verde.

Comprimir es simplemente recodificar el vídeo con un códec moderno a una calidad y resolución sensatas para la reproducción en pantalla. Bien hecho, reduce el archivo entre un 70 y un 95% y se ve casi idéntico al tamaño en que realmente aparece en la página: la diferencia entre un vídeo que aparece al instante y otro que se queda girando.

Elige el códec adecuado

El códec es el algoritmo que empaqueta los píxeles, y importa más que cualquier otro ajuste. Los tres códecs web modernos producen archivos mucho más pequeños que una grabación sin tocar; sacrifican compatibilidad a cambio de eficiencia. El contenedor —MP4 o WebM— es solo la envoltura que rodea al códec.

La opción segura por defecto es H.264 dentro de un MP4: se reproduce en todos los navegadores, teléfonos y smart TV fabricados en los últimos quince años. Para un sitio moderno puedes servir un archivo VP9 o AV1 más pequeño y listar el MP4 H.264 como reserva, de modo que los navegadores capaces descarguen el archivo pequeño y el resto siga reproduciéndose.

H.264 (MP4)

La base universal. El más grande de los tres a una calidad dada, pero se reproduce absolutamente en todas partes: el formato que conviene mantener como fuente de reserva.

VP9 (WebM)

El códec abierto de Google, aproximadamente entre un 30 y un 50% más pequeño que H.264 con calidad similar. Se reproduce en Chrome, Firefox, Edge y Android; combínalo con una reserva MP4 para Safari antiguo.

AV1 (MP4 o WebM)

El más nuevo y eficiente —más pequeño aún que VP9— a costa de una codificación más lenta y de soporte solo en navegadores recientes. Mejor combinado con una reserva H.264.

Tasa de bits, resolución y velocidad de fotogramas

Después del códec, tres ajustes deciden el tamaño final. La resolución es el factor que más influye: si un clip se muestra con 800 píxeles de ancho, codificarlo en 4K malgasta un enorme ancho de banda en un detalle que nadie ve. Limita la resolución a cómo se muestra realmente el vídeo: 1080p o 720p cubren casi cualquier uso web, y los bucles de fondo pueden bajar todavía más.

La tasa de bits —cuántos bits por segundo puede gastar el códec— es lo que la codificación basada en calidad fija por ti. En lugar de adivinar un número, elige un objetivo de calidad y deja que el codificador asigne los bits donde la imagen los necesita; así se conserva el detalle en las escenas complejas sin inflar las sencillas. Baja la calidad un punto para los fondos y súbela para material detallado que quieras nítido.

La velocidad de fotogramas es el último recorte. La mayoría del vídeo web se ve perfectamente fluido a 30 fps, y los clips cinematográficos a 24 fps; reducir a la mitad una grabación de 60 fps recorta más o menos a la mitad los datos de movimiento. Eliminar la pista de audio —imprescindible para los fondos con reproducción automática, que deben ir silenciados— ahorra aún más. Los preajustes de TinyVid agrupan estas decisiones: Reproductor estándar para calidad equilibrada, Compresión máxima para el archivo más pequeño y Fondo hero para un clip silenciado y en bucle.

Incrusta el vídeo comprimido

Un archivo comprimido solo compensa si lo incrustas bien. Colócalo en una etiqueta de vídeo simple con un width y un height explícitos para que el navegador reserve el espacio y la página no dé saltos mientras carga, y añade una imagen poster para que haya algo en pantalla antes de que llegue el primer fotograma.

Fija preload en metadata para que el navegador obtenga las dimensiones pero no el clip entero hasta que alguien pulse reproducir, y lista más de una source —el WebM o AV1 pequeño primero, el MP4 H.264 al final— para que cada navegador descargue el mejor archivo que pueda descodificar. Para un fondo decorativo, silencia el clip y añade autoplay, loop y playsinline, ya que los navegadores bloquean la reproducción automática de cualquier cosa con sonido.

Para el marcado completo de cada patrón —un reproductor estándar, un bucle de fondo silenciado y un clip con carga diferida— consulta la guía de código embed de vídeo HTML.