Usar vídeos de fondo en tu página web puede ser una manera estupenda de atraer la atención inicial de los visitantes. El vídeo se ha hecho cada vez más popular a lo largo de los años como opción de diseño de fondos, y sin duda seguirá creciendo, ya que el soporte para vídeos HTML5 en todos los navegadores modernos está cerca de convertirse en la norma.

Algunas de las preguntas más frecuentes que vemos online sobre cómo optimizar los vídeos para diseño web se resumen en 2 problemas comunes que puedes encontrarte al crear e implementar vídeos de fondo en tus proyectos.

1) Comprimiendo vídeos para su uso en páginas web

Este primer inconveniente consiste en que muchas veces los vídeos son demasiado grandes cuando salen de las aplicaciones de edición o creación. Este es un gran problema, ya que un ancho de banda limitado y conexiones a internet pobres pueden provocar que los vídeos queden en pausa o buffering antes de que se carguen por completo.

Así pues, lo que supuestamente iba a ser un agradable opción de diseño que da un valor añadido a la impresión general de una página web puede convertirse en una molestia para los visitantes si tienen que esperar a que todos los elementos se carguen y se muestren correctamente.

compress-web-design

Los vídeos grandes no son malos únicamente para los tiempos de carga de la página en general, sino que proporcionan una experiencia de usuario negativa, especialmente cuando al acceder a tu sitio por primera vez, cuando todavía no está en caché. También pueden tener un impacto negativo en el SEO de tu sitio, ya que los tiempos de carga rápidos son un factor importante que Google y otros tienen cuenta. Por lo tanto, comprimir vídeos antes de usarlos en una página web es lo mejor.

2) Convirtiendo vídeos para HTML5

En segundo lugar , los vídeos que recibes de tus compañeros o creas con paquetes de edición a menudo están en un formato que puede provocar problemas durante su ejecución, ya que la mayoría de los navegadores (Chrome, Firefox, Edge, Opera, Internet Explorer, Safari, etc.) son capaces de reconocer algunos formatos de vídeo, códecs de vídeo y (si está en el contenedor) códecs de audio sin plugins extras, pero no otros.

Los formatos de vídeo MP4 y WebM son posiblemente los más comunes para su uso en la web. Debido a posibles problemas de licencia con MP4, lo mejor es convertir vídeos a WebM (VP8) antes de usarlos en páginas web, y opcionalmente proporcionar un vídeo MP4 (H264) como alternativa para los navegadores que no soporten WebM.

Esto es importante para asegurar que los vídeos sean aceptados por tantos navegadores y en tantos combos de teléfonos, tabletas, portátiles y sistemas operativos como sea posible. Desafortunadamente, hasta la fecha no existe una combinación de formato/códec de vídeo/códec de audio que sirva para todos.

Optimizar vídeos para diseño web

Como mencionamos anteriormente, una forma de optimizar vídeos para diseño web es reducir el tamaño del archivo de vídeo, lo que ayudará a mejorar drásticamente los tiempos de carga y el rendimiento de la reproducción.

Otras opciones incluyen reducir la resolución y la calidad del vídeo (nivel de compresión y tasa de bits). Otra opción más es elegir un formato de vídeo ampliamente reconocido.

Aunque normalmente no recomendamos reducir demasiado la resolución y la tasa de bits de tus vídeos, ya que ambas son importantes para la calidad visible de un vídeo, esto es menos preocupante cuando hablamos de vídeos de fondo para páginas web, porque normalmente los visitantes no se centran en este tipo de clips.

En lugar de eso, se muestran vídeos HTML5 en bucle tras capas transparentes y/o elementos de texto, y son un artículo de soporte del diseño que tiene que cargarse y reproducirse rápidamente en cualquier dispositivo utilizado por el visitante que accede a tu sitio, sin importar la conexión a internet que esté usando.

Así pues, un tamaño de archivo pequeño es más importante hasta cierto punto que la resolución, la tasa de bits y la calidad visible.

Puede que ya hayas adivinado que si el objetivo es crear un archivo de vídeo pequeño de buena calidad, nuestro convertidor de vídeo online y compresor de vídeo Clipchamp gratis es una buena herramienta de ayuda.

Ya es popular entre diseñadores web, desarrolladores web, diseñadores gráficos y creadores en WordPress, Wix y Squarespace. También ha sido recomendada como aplicación útil por bloggers de diseño web y plataformas de creación de páginas web visuales como Webflow, especialmente para comprimir vídeos de fondo y cinemagraphs*para páginas web.

 

compress-video-web-design

 

Clipchamp comprime y convierte vídeos localmente en tu navegador antes de que los subas a tu servidor, proveedor de alojamiento o creador de páginas web. Así que no solo es útil cuando el vídeo está subido en la página web, sino que consigue que la subida inicial sea más rápida.

Para el uso en páginas web, por lo general recomendamos comprimir los vídeos como mínimo a 720p, utilizando la opción de calidad media o baja de Clipchamp. Son posibles las dos opciones de salida Web y Móvil – el preajuste Móvil producirá archivos de salida más pequeños que el Web con una calidad visible ligeramente más reducida.

En resumen, la mejor configuración para vídeos de fondo es Web, 720p, calidad media, MP4 o WebM o Móvil, 720p, calidad media, MP4. Dependiendo de tu archivo de entrada y de la calidad, así como del tamaño del archivo de los vídeos de salida que Clipchamp produce en tu supuesto, es mejor probar una combinación de distintos ajustes para obtener un resultado con el que estés contento.

 

HTML5-background-video

 

Entendemos que puede ser tentador utilizar vídeos de alta calidad de 1080p o más, pero recomendamos no hacerlo teniendo en cuenta que el tiempo medio que los visitantes pasan en una página web dada es inferior a los 15 segundos. Tu objetivo es causar una buena primera impresión en esos primeros segundos cruciales, y nuestro convertidor de vídeo online puede ayudarte con eso.

 


*Te estarás preguntando qué son los cinemagraphs. Consulta este subreddit y sus preciosos ejemplos.