El mejor formato de vídeo para tu web: MP4, WebM y más

TL;DR: El mejor formato de vídeo para tu web

Este artículo es bastante largo y entra en mucho detalle. Aquí tienes un resumen rápido "demasiado largo; no lo leí". La elección del formato de vídeo adecuado depende de tus requisitos. MP4 es universalmente compatible e ideal para tamaños de archivo moderados. WEBM ofrece una compresión más eficiente y es adecuado para sitios web modernos y de alto rendimiento, pero tiene soporte limitado en navegadores. AVIF es genial para animaciones y ofrece excelente calidad de imagen con archivos pequeños, pero no es compatible con todos los dispositivos antiguos. Hay algunos pros y contras adicionales (ver más abajo). Otros formatos no deberían usarse.

Para vídeos, tienes dos opciones: Self-hosting o hosting profesional. Self-hosting significa configurar tu propio player y gestionar manualmente distintas calidades de vídeo, lo que requiere esfuerzo y recursos adicionales. Los servicios profesionales, en cambio, ofrecen streaming adaptativo real y facilitan enormemente la gestión de vídeo, resultando en una mejor experiencia para tus visitantes.

Nuestra experiencia en formatos de vídeo

En los últimos años, nos hemos centrado intensamente en vídeos web y su integración en proyectos web grandes y pequeños. A través de este trabajo, hemos adquirido mucha experiencia y entendemos los retos de integrar vídeos en un sitio web, ya sea optimizar tiempos de carga, encontrar el equilibrio adecuado entre calidad y consumo de datos, o cumplir con los estándares de accesibilidad de la UE para vídeos. Por la insatisfacción con otras soluciones, desarrollamos Ignite Video Hosting. Pero ese no es el tema aquí.

Criterios importantes para elegir un formato de vídeo

Podrías, por supuesto, ir directamente a la tabla, pero demos un paso atrás y veamos primero los criterios básicos. Porque algo de antemano: no existe "una solución perfecta".

Para nosotros, tanto los aspectos técnicos como las necesidades de tu público objetivo juegan un papel crucial.

1. Calidad vs. tiempo de carga La calidad y duración de un vídeo afectan significativamente al tamaño del archivo. Mayor calidad suele significar archivos más grandes, lo que puede provocar tiempos de carga más largos. Un equilibrio adecuado entre tamaño de archivo y calidad es esencial para no frustrar a los usuarios con cargas eternas.
2. Compatibilidad Un formato de vídeo debería funcionar en la mayor cantidad posible de dispositivos y navegadores. Soportar navegadores antiguos y dispositivos móviles es especialmente importante para llegar a una audiencia amplia. Como desarrolladores web o diseñadores que implementamos soluciones, solemos tener los últimos dispositivos y usar software moderno. Desafortunadamente, la realidad es otra. Navegadores antiguos. Ordenadores viejos. Smartphones obsoletos con navegadores desactualizados.
3. Requisitos de streaming Especialmente para vídeos largos o un gran número de espectadores simultáneos, se necesita un streaming eficiente. El streaming adaptativo garantiza que los usuarios obtengan la mejor calidad según su velocidad de internet.
4. Accesibilidad Los vídeos accesibles son esenciales para muchos públicos. Esto incluye la posibilidad de añadir subtítulos o audiodescripciones y garantizar que el player sea fácil de usar. La Ley Europea de Accesibilidad será obligatoria en 2025, lo que significa que ya no puedes ignorarlo. (Los detalles sobre vídeos y accesibilidad los encontrarás aquí, y un buen ejemplo de player accesible aquí).
5. Consumo de ancho de banda y carga del servidor Un formato de vídeo eficiente reduce el consumo de datos tanto para los usuarios como para los servidores. Esto es especialmente importante con altos volúmenes de tráfico o capacidad de servidor limitada. En proyectos web pequeños, esto a menudo no importa. Pero cuando tienes muchos visitantes simultáneos, puede convertirse en un problema — o simplemente en algo caro, por el alto ancho de banda que generas.
6. Entorno técnico ¿En qué configuración se reproducirán los vídeos? ¿Es "solo" un sitio WordPress o un CMS más grande como Magnolia? ¿Cómo se integran los vídeos ahí? ¿Soporta el CMS el formato deseado? Al final: ¿tengo siquiera opción de elegir?
7. Casos de uso Normalmente empezamos con la mejor UX posible para los visitantes, así que los diferentes casos de uso son cruciales para elegir el formato correcto. Los vídeos de fondo que se reproducen detrás de otros elementos suelen requerir menor calidad para minimizar los tiempos de carga. Los vídeos integrados en el contenido, que pueden ser bastante largos, requieren mayor calidad y opciones de streaming eficientes para garantizar una buena experiencia de usuario.
8. ¿Self-hosting o hosting profesional? Cuando se trata de insertar vídeos en tu web, básicamente tienes dos opciones: self-hosting o usar servicios de hosting profesional. Con self-hosting, necesitarás varios componentes como un servidor potente, un player de vídeo adecuado y suficiente ancho de banda y almacenamiento para manejar un tráfico alto. Además, necesitas gestionar la codificación de los vídeos para ofrecerlos en diferentes niveles de calidad. Como alternativa, los servicios de hosting profesional pueden quitarte ese trabajo de encima. Estas soluciones ofrecen streaming adaptativo, calidad de vídeo optimizada y funciones de accesibilidad que se integran fácilmente. Especialmente para sitios web con contenido de vídeo de alta calidad, esta opción merece la pena porque te libra de la codificación, la integración del player y la infraestructura de streaming.

Todos los formatos de vídeo para sitios web en detalle

Basta de teoría, vamos a los formatos. Como has visto arriba, la elección del formato de vídeo adecuado para tu sitio web depende en gran medida del propósito del vídeo. Cada formato tiene ventajas y desventajas específicas que pueden pesar de forma diferente según el caso de uso. Veamos en detalle los formatos de vídeo más comunes, sus usos, y sus puntos fuertes y débiles.

MP4: El estándar universal

MP4, basado en el estándar MPEG-4, fue desarrollado para almacenar y reproducir datos de vídeo y audio de forma eficiente. Es uno de los formatos de vídeo más utilizados y es compatible con casi todos los navegadores y dispositivos modernos.

Ventajas

• Alta compatibilidad: Funciona en casi todos los navegadores, sistemas operativos y dispositivos.
• Buena calidad con tamaño de archivo moderado: Ideal para la mayoría de casos de uso.
• Compatible con streaming: Permite streaming adaptativo vía HLS.
• Accesibilidad: Compatible con subtítulos y metadatos.

Desventajas

• Tecnología de compresión obsoleta: MP4 usa H.264, que es menos eficiente comparado con codecs modernos como AV1, lo que resulta en archivos más grandes para la misma calidad.
• Sin licencia abierta: El codec H.264 está patentado y su uso puede requerir el pago de licencias, especialmente para aplicaciones comerciales.
• Sin compresión sin pérdida: MP4 usa compresión con pérdida, lo que significa que se pierde calidad con cada compresión, haciéndolo inadecuado para casos donde se necesita la máxima calidad.
• Poca flexibilidad para ajustes dinámicos: MP4 sin streaming adaptativo no soporta ajuste dinámico de calidad, lo que puede ser problemático con condiciones de red variables. Sí, puede manejar streaming HLS, pero tu servidor y player deben soportarlo.

Casos de uso MP4 es un formato habitual para integrar vídeos en sitios web gracias a su amplia compatibilidad con diferentes dispositivos y navegadores. Es muy adecuado para aplicaciones donde se necesita reproducción en la mayoría de plataformas, y para vídeos de duración y tamaño moderados. Los vídeos de fondo también funcionan bien con MP4, ya que el formato ofrece un buen equilibrio entre calidad y tiempo de carga. Eso sí, para vídeos de fondo, asegúrate de que sean lo más pequeños y cortos posible.

WEBM: El favorito moderno

WEBM fue desarrollado por Google como un formato open source específicamente para la web. Utiliza codecs modernos como VP9 o AV1, que ofrecen alta compresión y buena calidad.

Ventajas

• Alta eficiencia: Muy buena calidad con archivos pequeños.
• Uso gratuito: Sin licencia gracias a su naturaleza open source.
• Compatible con streaming: Soporta streaming adaptativo vía DASH.
• Accesibilidad: Compatible con subtítulos y otros metadatos.

Desventajas

• Compatibilidad: Soporte limitado en Safari y dispositivos antiguos. En septiembre de 2024, Safari tenía una cuota de mercado global de alrededor del 9,2 % (Fuente: Statista), lo que significa que una parte de los usuarios podría tener problemas para reproducir estos vídeos. Dependiendo de tu público objetivo, aproximadamente 1 de cada 10 visitantes podría no poder ver tu vídeo.
• Baja aceleración por hardware: Suena muy técnico, pero muchos smartphones y tablets antiguos no tienen aceleración por hardware nativa para vídeos WebM. Esto significa que se necesita más potencia de procesamiento en el dispositivo. Si además tienes otras animaciones, mucho CSS, JavaScript, etc., esto puede provocar tirones o un rendimiento pobre de todo el sitio web.

Casos de uso WEBM es especialmente adecuado para sitios web que priorizan el uso eficiente del ancho de banda y tiempos de carga rápidos, sobre todo cuando el rendimiento y los archivos pequeños son la prioridad. Es rentable porque no requiere licencia. Para nosotros, el mayor problema siempre ha sido la compatibilidad. Aunque el número de dispositivos no compatibles está disminuyendo constantemente, ¿realmente quieres excluir potencialmente a 1 de cada 10 visitantes? Al final, muchas veces acabamos volviendo a MP4.

GIF: Obsoleto e ineficiente

Esto en realidad no es un formato de vídeo. ¿Por qué aparece aquí? Porque en la práctica, vemos a menudo GIFs usados para animar sitios web.

Siendo honestos: si no es una animación gráfica o un meme, es una idea realmente mala.

Ventajas

• Eh... sí... ¿Encanto retro?

Desventajas

• Calidad pobre: Paleta de colores limitada (256 colores) y sin opciones HD.
• Alto consumo de ancho de banda: Archivos muy grandes para animaciones largas. Si tus visitantes no tienen la mejor conexión a internet (p. ej., en movimiento), la cosa se pone realmente fea.
• Sin accesibilidad: No soporta subtítulos ni metadatos. Especialmente problemático si intentas usarlo para insertar un vídeo.

Casos de uso Animaciones simples o pequeños efectos visuales. Si tu contenido parece un vídeo, no uses GIF.

MOV: Obsoleto e impráctico para la web

MOV fue desarrollado por Apple y en su día fue el formato estándar para QuickTime. Ofrece alta calidad pero, siendo diplomáticos, está obsoleto para uso web. Simplemente no lo uses.

Desventajas

• Archivos grandes: Impráctico para uso web.
• Compatibilidad limitada: Optimizado principalmente para dispositivos Apple.
• No apto para streaming eficiente.

Casos de uso Quizás para edición profesional o como formato intermedio en producción de vídeo. Pero si alguien te envía un archivo MOV para el sitio web, no lo insertes directamente. Mira MP4 o WEBM más arriba.

AVI: Una reliquia del pasado

AVI (Audio Video Interleave) fue desarrollado por Microsoft y es uno de los formatos de vídeo más antiguos. Como con MOV, nuestra opinión es clara: ¡NO LO USES! Simplemente está obsoleto.

Desventajas

• Archivos grandes: Tamaños de archivo muy ineficientes.
• Compatibilidad web limitada: No apto para estándares web modernos.
• (Vergüenza ajena: Otros desarrolladores web te van a mirar raro si pones un archivo AVI en tu sitio web.)

Casos de uso Simplemente no.

AVIF: Moderno pero especializado

AVIF (AV1 Image File Format) está basado en el codec AV1 y está diseñado principalmente para imágenes. Hay algunos casos de uso donde es una buena elección, especialmente cuando se trata de animaciones. En esos casos, normalmente no necesitas un formato de vídeo clásico, ya que las pérdidas de calidad a menudo pueden arruinar la animación.

Ventajas

• Compresión excelente: Archivos muy pequeños con alta calidad.
• Open source: Sin licencia y preparado para el futuro.

Desventajas

• Uso limitado: No apto para vídeos "largos". En este caso, cualquier cosa de más de 5-10 segundos se considera larga.
• Compatibilidad: Aún no está completamente soportado en todos los sitios. Similar a WEBM, alrededor del 10-15 % de los usuarios podrían tener un navegador antiguo y por tanto no ver el vídeo. El porcentaje está bajando, pero quizás quieras revisar tus estadísticas y valorar las opciones tú mismo.
• Sin opciones de streaming: No fue desarrollado para streaming adaptativo.

Casos de uso Para animaciones o clips cortos que necesitan ser extremadamente eficientes en datos. Si tienes ese caso específico: adelante. Actualmente, recomendamos añadir un fallback para navegadores y smartphones antiguos.

En profundidad: Streaming adaptativo de vídeos en la web

Habrás notado que hemos insistido bastante en el tema del "streaming". Fue sencillamente uno de los mayores retos a los que nos enfrentamos al integrar vídeos. Claro, puedes alojar tú mismo archivos MP4 o WebM, pero no es tan bueno y es complicado.

¿Por qué? La palabra mágica es "streaming adaptativo".

Streaming adaptativo de archivos autoalojados

Con un formato de vídeo autoalojado como MP4 o WebM, técnicamente puedes lograr streaming adaptativo. Sin embargo, necesitas crear manualmente el vídeo en múltiples niveles de calidad (p. ej., 360p, 720p, 1080p). Después, se necesita un player que seleccione el nivel de calidad adecuado según el ancho de banda y el dispositivo del usuario. Esto significa que un usuario con conexión lenta recibe una calidad inferior (p. ej., 360p), mientras que una conexión más rápida ofrece la mejor calidad.

Streaming adaptativo a través de servicios de hosting de vídeo

Los servicios profesionales ofrecen streaming adaptativo "real", que genera automáticamente diferentes niveles de calidad y los entrega al usuario sin que tú tengas que intervenir manualmente como operador del sitio web. Estos servicios usan protocolos especiales como HLS (HTTP Live Streaming) o DASH, que aseguran que el vídeo se transmita en pequeños segmentos. La calidad de estos segmentos se ajusta dinámicamente al ancho de banda y dispositivo actual del usuario. (Sí, también puedes hacer esto con archivos autoalojados, pero tienes que configurarlo tú.)

Los usuarios siempre obtienen la mejor calidad posible sin interrupciones de carga ni largos tiempos de inicio — todo automáticamente.

¿Por qué es importante?

• Streaming adaptativo de archivos (p. ej., MP4/WebM) es técnicamente posible, pero tienes que configurarlo tú mismo. Normalmente no es streaming real, sino más bien una selección de varios archivos preparados previamente entre los que el player elige.
• Streaming adaptativo real (HLS/DASH) va más allá de lo que se puede lograr con vídeos autoalojados, ajustando la calidad del vídeo en tiempo real. El streaming adaptativo se ajusta de forma flexible al ancho de banda, lo que mejora enormemente la experiencia del usuario, especialmente en condiciones de red cambiantes.

¿Es la diferencia tan grande como para necesitar un capítulo aparte?

Sí, la diferencia sigue siendo significativa porque, en la práctica, muchas veces nos da pereza hacer el esfuerzo. Se sube un archivo al CMS. Ya irá bien. Lo sabemos de primera mano; construyes un sitio web con 1.000 tareas pendientes, y por supuesto, renderizar el vídeo en múltiples versiones y formatos correctos muchas veces no entra en la lista.

En un entorno extremadamente competitivo como la web, ese "ya irá bien" acaba siendo un problema real — especialmente si tus visitantes no pueden ver los vídeos o tienen una mala experiencia.

Por ejemplo, si usas vídeos de fondo para cabeceras o similares, deberías calcular un tamaño adecuado en función de su dimensión y posición. Esto es normal para imágenes. Tampoco pondrías un PNG de 12 MB en el contenido — pero con los vídeos, muchos se olvidan de esto en la práctica.

Dame pruebas: ¿Cuál es la diferencia real?

Bien, esto se va a poner un poco friki. Puedes saltártelo si quieres.

Hagamos un ejemplo: Con una conexión 4G moderada de unos 10 Mbit/s (1.25 MB/s), las diferencias entre un MP4 autoalojado y el streaming adaptativo real son más evidentes.

Supuestos del ejemplo:

• Archivo de vídeo: 20 MB, 1 minuto de duración
• Velocidad de conexión (4G moderado): Media de 10 Mbit/s (1.25 MB/s)

1. Archivo MP4 (autoalojado, no adaptativo)

• Tiempo de descarga completa: 20 MB / 1.25 MB/s ≈ 16 seconds
• Tiempo de buffer antes de la reproducción: Normalmente, hay que precargar un 25-30% del vídeo, lo que significa que cargar los primeros 5-6 MB lleva unos 4-5 seconds.
• Si la conexión se vuelve inestable y cae por debajo de 10 Mbit/s, la reproducción puede detenerse y necesitar recargarse porque la calidad no se ajusta dinámicamente.

2. Streaming adaptativo (HLS/DASH)

• Tiempo de inicio del vídeo: El streaming adaptativo real divide el vídeo en segmentos más pequeños, normalmente de 2-10 seconds de duración. Con una conexión 4G moderada, se carga un segmento inicial en calidad baja, permitiendo que el vídeo empiece en aproximadamente 1 segundo.
• Ajuste continuo: El streaming adaptativo ajusta la calidad dinámicamente según el ancho de banda actual. Si la conexión cae a 6-8 Mbit/s, el sistema cambia automáticamente a una resolución inferior para mantener la reproducción sin interrupciones. Esto asegura que el vídeo se mantenga estable incluso con una conexión más débil.

Resumen de tiempos de carga:

• MP4 sin streaming adaptativo: Empieza en unos 4-5 seconds con una conexión 4G moderada y estable.
• Streaming adaptativo (HLS/DASH): Empieza en unos 1 second porque solo carga una pequeña porción en calidad baja.

¿4 segundos? ¿Eso no molesta a nadie? ¿Para qué tanto esfuerzo?

Bueno... Ahora ve a un sitio web, mira algo de contenido y cuenta hasta cuatro... una parte de tus visitantes ya habrá hecho scroll, cambiado de pestaña o simplemente se habrá ido.

Especialmente con conexiones móviles, que suelen ser inestables, el ajuste continuo de la calidad es crucial para una experiencia de usuario positiva.

Conclusión: Diferentes formatos para diferentes casos de uso

Artículo largo. Perdón. Pero como puedes ver, no hay "una sola solución". Es complejo.

1. MP4 – El todoterreno universal

• ¿Cuándo usarlo? Para vídeos que necesitan funcionar sin problemas en todos los dispositivos.
• Pros: Alta compatibilidad, tamaño de archivo moderado, soporte de streaming.
• Contras: Codec con licencia, compresión menos eficiente en comparación con formatos más nuevos.

2. WEBM – Para sitios web modernos y eficientes

• ¿Cuándo usarlo? Si priorizas tiempos de carga rápidos y archivos pequeños.
• Pros: Compresión eficiente, codecs modernos, bajo consumo de ancho de banda.
• Contras: Compatibilidad limitada (ver arriba) y capacidades de streaming restringidas.

3. AVIF – Para animaciones e imágenes eficientes

• ¿Cuándo usarlo? Para animaciones de alta calidad.
• Pros: Excelente compresión, tecnología moderna, libre de licencias.
• Contras: Compatibilidad limitada (ver arriba).

O usa hosting de vídeo profesional para tus vídeos

Nuestra opinión ¿Somos neutrales aquí? Sí y no.

Implementamos una de estas soluciones durante años, pero seamos honestos: los vídeos se han convertido en una parte tan esencial de los sitios web. Se invierte tanto esfuerzo y dinero en ellos, ¿y luego aceptamos obstáculos artificiales? No es lo ideal, la verdad.

Para nosotros, el hosting profesional se convirtió en la única solución, pero entonces nos encontramos con un nuevo problema con Vimeo, YouTube, Wistia — la conformidad con el RGPD. Todos requerían consentimiento y soluciones incómodas para la experiencia de usuario. No queríamos compromisos — ni con el formato, ni con la tecnología. Por eso construimos Ignite. Con nosotros, puedes alojar tus vídeos profesionalmente desde €15. Generamos automáticamente tu vídeo en diferentes codecs y tamaños. Solo tienes que integrarlo, o usar nuestro player, que además es accesible.

Sabemos que una vez que tienes 5-10 vídeos en tu sitio web, gestionarlos se convierte en un dolor de cabeza — lidiar con todas las versiones, los diferentes formatos, las miniaturas de previsualización, etc.