Compresión de vídeo

Cómo optimizar vídeos HTML5 para tu web

Clipchamp es un editor de vídeo online gratuitoPruébalo gratis
Compartir esta publicación

*La compresión de vídeo ahora solo está disponible para los usuarios de Clipchamp Utilities.

Última actualización: 15 de octubre de 2019

El vídeo online sigue dominando internet, hasta el punto de que se ha convertido en un elemento habitual en el diseño web. 

Los vídeos atraen la atención y despiertan la imaginación, por lo que no es de extrañar que los veamos incrustados en multitud de páginas de inicio para captar la mirada del usuario. Casi todos los navegadores web admiten vídeo HTML5, por eso es el momento perfecto para que pongas un vídeo de fondo o de cabecera en tu web.

Clipchamp dispone de plantillas fantásticas que te vendrán genial para el diseño de tu web, como esta maravillosa cinemagrafía:

Usa esta plantilla

Hay muchas razones por las que deberías poner vídeo HTML5 en tu web, pero vayamos por partes. Pueden surgir diversos problemas que te obligarán a optimizar el vídeo para garantizar un rendimiento sin problemas. Estos son los puntos que abordaremos:

  1. Por qué tienes que optimizar los vídeos de tu web

    • Las webs lentas pierden clientes.

    • No todos los formatos de vídeo son iguales.

  2. Cómo optimizar tus vídeos con Clipchamp

    • Comprime tus vídeos para HTML5.

    • Convierte tu vídeo para que sea compatible con todos los navegadores.

1. Por qué tienes que optimizar los vídeos de tu web

Las ventajas del vídeo HTML5 también conllevan ciertos inconvenientes. Los contenidos de vídeo incrustados que se reproducen automáticamente ralentizarán la carga de las páginas, lo cual tendrá un impacto negativo en el tráfico a tu web. También puedes tener problemas si los vídeos no son compatibles con los navegadores que utilizan tus clientes.

Las webs lentas pierden clientes.

Si el vídeo HTML5 es demasiado grande, puede ralentizar considerablemente la web de tu empresa. Esto puede provocar una experiencia desagradable para los usuarios, que ven como el vídeo se queda en pausa y almacenándose en búfer mientras se carga la página. 

Así, lo que se supone que es una bonita opción de diseño, que mejora la impresión general de una web, puede convertirse en una molestia para los visitantes si tienen que esperar a que todos los elementos se carguen y se muestren correctamente.

Desktop and mobile user waiting for video to load

Aunque tengamos un gran SEO y fantásticas ofertas que atraigan a la gente a nuestra web, una mala experiencia de usuario puede echarlo todo a perder. La gente no solo dejará de visitarnos, sino que Google se dará cuenta. Los tiempos de carga de las páginas y las tasas de clics son dos factores importantes que afectan a la clasificación de nuestra página en Google. Así que asegúrate de comprimir los vídeos de tu web.

Si el contenido de tu vídeo está en la nube, asegúrate de que tu proveedor de alojamiento garantiza la rapidez de carga y tiempo de actividad. De esa manera, proporcionarás una experiencia de vídeo ininterrumpida a quienes visiten tu web. Algunos proveedores de alojamiento en la nube ofrecen pruebas gratuitas de sus servicios.

Editor de vídeo en el navegador.

Gratis para siempre. Crea vídeos profesionales en cuestión de minutos.

No todos los formatos de vídeo son iguales.

El mejor vídeo HTML5 del mundo no te servirá de nada si no se carga en los navegadores de los internautas. No todos los formatos de vídeo se cargan en todos los tipos de navegadores. Por eso, es necesario convertir los vídeos y evitar así el momento incómodo en el que no se carga ese vistoso contenido de vídeo. Este aspecto es importante para garantizar que los vídeos sean aceptados por el mayor número posible de navegadores en el mayor número posible de dispositivos. 

Lamentablemente no hay un único formato que sirva para todo, pero la apuesta más segura es WebM (VP8) o MP4 (H264). No se cargarán en todos, pero sí en la mayoría de los navegadores. 

De hecho, lo mejor es que conviertas el contenido del vídeo a WebM antes de utilizarlo en el diseño de tu web y, al mismo tiempo, facilites una alternativa en MP4. De esa manera, en el caso poco frecuente de que WebM no sea compatible, se cargará la versión MP4 en su lugar.

2. Cómo optimizar tus vídeos con Clipchamp

Las dos formas fundamentales de optimizar los vídeos para el diseño de una web son la compresión y la conversión ¡y las dos las puedes hacer gratis con Clipchamp Utilities!

Como hemos mencionado anteriormente, las mejores formas de optimizar los vídeos para el diseño web son la compresión y la conversión, que ayudarán a mejorar drásticamente los tiempos de carga de las páginas y el rendimiento de la reproducción. 

Pero antes, queremos hacerte una recomendación: normalmente, para mantener la calidad, no sugerimos reducir demasiado la resolución y la tasa de bits del vídeo, aunque si diseñas vídeos de fondo para reproducirlos en tu web, sí podrías tener un poco más de flexibilidad. Estos vídeos no son el único foco de atención y a menudo se pueden mostrar en pantallas más pequeñas, ya que los usuarios navegan sobre todo desde sus teléfonos móviles. 

Los vídeos HTML5 en bucle suelen mostrarse detrás de capas transparentes o elementos de texto y deben cargarse y reproducirse rápidamente en cualquier dispositivo, independientemente de la conexión a internet. Por ello, el tamaño reducido de un archivo prima sobre la resolución. El propio sitio web de Clipchamp es en realidad un ejemplo práctico de este consejo. Ahora volvamos a la optimización de tus vídeos:

Comprime tus vídeos para HTML5.

Como habrás adivinado, si el objetivo es crear un archivo de vídeo pequeño de buena calidad, nuestro convertidor de vídeo online y el compresor de vídeo Clipchamp son 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 la han recomendado como una aplicación útil blogueros de diseño web y plataformas de creación de páginas web visuales como Webflow, especialmente para comprimir vídeos de fondo y cinemagráficos para páginas web.

Clipchamp enterprise users

Clipchamp comprime y convierte vídeos localmente en el navegador antes de subirlos al servidor, proveedor de alojamiento o creador de páginas web. Por lo tanto, no solo es útil una vez que el vídeo está en la web, sino que también acelera la carga inicial.

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 generará archivos de salida más pequeños que el Web, con un una calidad visible ligeramente más reducida.

Optimize your video for web

Convierte tu vídeo para que sea compatible con todos los navegadores.

Con Clipchamp Utilities, puedes convertir fácilmente cualquier vídeo para aumentar la compatibilidad con los navegadores. Solo tienes que subir tu vídeo, elegir el formato deseado en Personalizar ajustes y el convertidor gratuito de Clipchamp hará el resto:

Select WebM

Si quieres añadir un MP4 de respaldo para tu web, solo tienes que repetir el proceso, pero esta vez elige MP4.

Más del blog de Clipchamp

Pasar los vídeos de tu teléfono a Clipchamp

November 8, 2020
En 2021 hemos retirado Clipchamp Utilities y la compresión de vídeo. Pero no te preocupes…

Cómo mejora el vídeo las tasas de conversión para el comercio electrónico

June 9, 2020
**** actualizado el 28 de mayo de 2020 **** Independientemente de si se trata de…

Cómo incrustar vídeo en las versiones de Word 2007- 2016

March 9, 2020
*La compresión de vídeo ahora solo está disponible para los usuarios de Clipchamp…

Empieza a crear vídeos gratis con Clipchamp