Vídeo de fondo en una web: cómo usarlo sin que la haga lenta

Un vídeo de fondo funciona cuando es corto, sin sonido, ligero y no estorba: un plano de entre 6 y 12 segundos que se repite, comprimido para la web (alrededor de 1,5 MB en 1080p), con una imagen fija mientras carga y que se pueda pausar. Mal preparado, un solo vídeo puede pesar más que toda la web junta. Te enseño cómo lo hago con un plano mío de la cascada de Anna.

Cuánto pesa de verdad un vídeo

Lo que exporta un programa de edición está pensado para verse en grande o volver a editarse, no para viajar por una conexión móvil. Este plano salió del editor a 21 megabits por segundo: 18,7 MB en solo 7 segundos. Para la web lo comprimí a 1,5 MB, doce veces menos, y a simple vista no se nota la diferencia.

Dónde está el límite

Comprimir tiene un límite. Por debajo de cierto punto, lo que más se mueve en la imagen (el agua, la niebla, las hojas) se rompe en bloques. Ese punto depende de cada plano: un cielo quieto aguanta mucho más que una cascada. Por eso no uso un número fijo: comprimo, lo miro a pantalla completa y ajusto.

Cómo lo preparo

• Corto. Entre 6 y 12 segundos, y un plano que se repita sin que se note el corte.
• Sin sonido. Sin pista de audio: pesa menos, y los navegadores solo reproducen solos los vídeos silenciados.
• Dos tamaños. 1080p para pantallas grandes y 720p para el móvil. En un móvil, el 1080p no se nota y pesa más del doble.
• H.264 en MP4. Funciona en todos los navegadores. Comprimo con calidad constante y un tope de velocidad para que ningún momento dispare el peso.
• Listo para empezar pronto. Con la información del vídeo al principio del archivo, empieza a verse antes de terminar de descargarse.

Cómo lo pongo en la web

• Una imagen fija primero. Mientras el vídeo llega se ve un fotograma del propio plano. Si el vídeo no carga, la portada no se queda vacía.
• Solo cuando aparece. El vídeo no se descarga hasta que entra en pantalla, y se para cuando sale.
• Silenciado y dentro de la página. Es la condición para que se reproduzca solo, también en el iPhone.
• Con un botón de pausa. Las pautas de accesibilidad (WCAG) piden poder pausar todo lo que se mueve solo durante más de cinco segundos.
• Respetando a quien no quiere movimiento. Si alguien tiene activada la opción de reducir el movimiento, ve la imagen fija.

Todo esto importa porque la portada es lo primero que se mide cuando hablamos de velocidad. Lo cuento en Por qué una web lenta te cuesta reservas.

¿Vídeo o foto?

Un vídeo de fondo merece la pena cuando el movimiento cuenta algo que una foto no puede: el agua que cae, la luz que cambia, un lugar que respira. Si el plano podría ser una foto, que sea una foto: pesa mucho menos y dice lo mismo.

En resumen

Un vídeo de fondo bien hecho es corto, sin sonido y comprimido para la web; enseña una imagen fija mientras carga, solo se descarga cuando aparece y se puede pausar. Así aporta todo el ambiente sin hacer esperar a nadie.

Si quieres vídeo en la portada de tu web, lo ruedo y lo preparo: cuéntame el proyecto y te respondo en un día laborable.