¿Cuál es el mejor formato de vídeo para la web?
| Formato | Códec de vídeo / audio | Se reproduce en | Tamaño de archivo | Úsalo para |
|---|---|---|---|---|
| MP4 | H.264 / AAC | Todos los navegadores y dispositivos | Referencia | La opción predeterminada y de respaldo |
| WebM | VP9 / Opus | Todos los navegadores principales actuales | A menudo un 30% más pequeño | Fuente principal en tu propio sitio |
| MP4 o WebM | AV1 / Opus o AAC | Chrome, Firefox, Edge; Safari con hardware AV1 | El más pequeño | Sitios con mucho tráfico que pueden codificar dos veces |
| MOV, AVI, MKV | Varios | No de forma fiable en navegadores | — | Conviértelos antes de publicarlos en un sitio web |
Respuesta corta: codifica en MP4 (H.264, AAC) para que el vídeo se reproduzca en todas partes y añade antes una fuente WebM (VP9) para los navegadores que puedan usar el archivo más pequeño. Para YouTube, Vimeo o redes sociales, basta con MP4.
Por qué importa el tamaño del vídeo en sitios web
El vídeo es uno de los activos más grandes en la mayoría de las páginas web. Un vídeo principal o un clip de fondo mal optimizado puede añadir megabytes al peso de la página, impactando directamente en:
- LCP (Largest Contentful Paint): si el vídeo es el elemento más grande, su tiempo de carga determina esta métrica Core Web Vital
- Costes de ancho de banda: servir MP4 de 10 MB a millones de visitantes se acumula rápidamente
- Experiencia móvil: los usuarios con conexiones móviles sufren más con archivos de vídeo grandes
- Posicionamiento SEO: Google usa Core Web Vitals como señal de clasificación
WebM + VP9 vs MP4 + H.264 para la web
Con la misma calidad visual (igualada mediante SSIM/VMAF), WebM con codificación VP9 genera archivos un 30–50% más pequeños que MP4 con H.264. Para un sitio que sirve 100 GB de vídeo MP4 al mes, pasar a WebM podría ahorrar 30–50 GB de ancho de banda.
Ejemplo orientativo para un clip de 30 segundos en 1080p (los tamaños reales dependen del contenido):
| Formato | Códec | Tamaño de archivo | Calidad |
|---|---|---|---|
| MP4 | H.264, CRF 23 | ~10 MB | Referencia |
| WebM | VP9, CRF 30 | ~6 MB | Similar |
Compatibilidad de navegadores en 2026
WebM VP9 es compatible con más del 97% de los navegadores a nivel mundial en 2026:
- Chrome: desde la versión 29 (2013)
- Firefox: desde la versión 28 (2014)
- Edge: desde la versión 14 (basado en Chromium desde la 79)
- Safari: versiones recientes — el último gran rezagado
Solo IE11 y versiones muy antiguas de Safari carecen de soporte, representando una cuota de mercado insignificante en 2026.
El patrón de respaldo HTML5 Video
El enfoque recomendado es servir WebM primero con MP4 como respaldo usando el elemento HTML5 <source>:
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
El navegador descarga y reproduce la primera fuente que admite. Dado que el 97%+ de los navegadores admiten WebM, la gran mayoría de los visitantes obtienen el archivo más pequeño. El respaldo MP4 garantiza que el ~3% restante siga viendo el vídeo.
Los atributos autoplay loop muted playsinline hacen que el vídeo se comporte como un GIF — reproducción automática, bucle, silenciado y en línea en Safari móvil.
Impacto en Core Web Vitals
Cambiar de MP4 a WebM mejora directamente las métricas de rendimiento web:
- Mejora del LCP: los archivos más pequeños se descargan más rápido, mejorando el Largest Contentful Paint
- Menor ancho de banda: mejor experiencia móvil, especialmente en conexiones lentas
- Recomendación de Google: Lighthouse y web.dev recomiendan explícitamente formatos de vídeo optimizados
Nuestra configuración de codificación VP9
Nuestro conversor usa estos ajustes VP9, optimizados para la entrega web:
- CRF 30: calidad visual aproximadamente comparable a CRF 23 en H.264
- cpu-used 3: velocidad de codificación equilibrada para un servicio online
- row-mt 1: multihilo por filas para codificar más rápido
- Audio Opus a 128k: alta calidad de audio para la mayoría del contenido
- -b:v 0: codificación basada únicamente en la calidad (sin límite de bitrate)
- yuv420p, dimensiones pares: color de 8 bits 4:2:0 que reproduce cualquier decodificador VP9; el ancho y el alto se redondean a números pares
Para una configuración más profunda de VP9, consulta nuestra guía de ajustes de codificación VP9.
Canal alfa de WebM (transparencia)
VP9 en WebM admite transparencia de canal alfa — una ventaja única sobre H.264/MP4. Esto permite superposiciones de vídeo transparentes en sitios web: logotipos animados, personajes, efectos que se integran perfectamente con cualquier fondo. Usa -pix_fmt yuva420p en FFmpeg para codificar con alfa.
AV1: el siguiente paso
AV1 es el códec abierto de nueva generación de la Alliance for Open Media. Comprime mejor que VP9, pero codifica mucho más despacio. Compatibilidad con navegadores: Chrome 70+, Firefox 67+ y Safari 17+ en dispositivos con decodificación AV1 por hardware. Para sitios con un uso intensivo de vídeo, AV1 es el futuro — pero en 2026 VP9 sigue siendo la opción práctica para la mayoría de los casos.
Formato de vídeo vs códec: ¿en qué se diferencian?
Un formato de vídeo (contenedor) es el envoltorio del archivo: MP4, WebM, MOV, MKV. Un códec es la forma en que se comprimen la imagen y el sonido que contiene: H.264, VP9, AV1, AAC, Opus.
Los navegadores necesitan que ambos encajen: un MP4 con H.264 se reproduce en todas partes, pero un MP4 con H.265 puede que no. Cuando una guía dice “usa MP4”, se refiere a MP4 con vídeo H.264 y audio AAC.