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 calidad visual idéntica (SSIM/VMAF equivalentes), WebM con codificación VP9 produce archivos 30–50% más pequeños que MP4 con H.264. Para un sitio que sirve 100 GB de vídeo MP4 al mes, cambiar a WebM podría ahorrar 30–50 GB de ancho de banda.
Comparación real con el mismo clip 1080p de 30 segundos:
| Formato | Códec | Tamaño de archivo | Calidad (VMAF) |
|---|---|---|---|
| MP4 | H.264, CRF 23 | 10 MB | 94.2 |
| WebM | VP9, CRF 30 | 6 MB | 94.1 |
Compatibilidad de navegadores en 2026
WebM VP9 es compatible con el 97%+ de los navegadores globales 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 79)
- Safari: desde la versión 16.6 (2023) — 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: equivalente a H.264 CRF 23 en calidad visual
- cpu-used 3: velocidad de codificación equilibrada para servicio en línea
- row-mt 1: multihilo basado en filas para codificación más rápida
- Opus 128k audio: calidad de audio transparente, superior a AAC en este bitrate
- -b:v 0: codificación puramente basada en calidad (sin límite de bitrate)
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. Ofrece una mejora de compresión adicional del 30% sobre VP9 pero codifica 5–10x más lento. La compatibilidad con navegadores está creciendo (Chrome 70+, Firefox 67+, Safari 17+). Para sitios con uso intenso de vídeo, AV1 es el futuro — pero VP9 sigue siendo la elección práctica en 2026 para la mayoría de los casos.