≡En resumen
- Optimizar un vídeo es reducir su peso y su coste de carga sin que se note en la calidad.
- H.264 funciona en todas partes; AV1 y H.265 comprimen más, pero con compatibilidad y licencias distintas.
- El streaming adaptativo (HLS o DASH) sirve a cada usuario la calidad que su conexión aguanta.
- En la web, póster ligero, preload mínimo y carga diferida evitan que el vídeo frene la página.
- Los subtítulos son parte de la optimización: accesibilidad, visionado sin sonido y contexto para buscadores.
01 ¿Qué es la video optimization?
En marketing se usa a veces «optimización de vídeo» para hablar de títulos, etiquetas y miniaturas. Eso es otra disciplina, el SEO para vídeos, que busca que el vídeo aparezca en buscadores. Esta entrada trata la parte técnica: el archivo y su entrega.
02 Optimización técnica de vídeo frente a video SEO
| Aspecto | Optimización técnica | Video SEO |
|---|---|---|
| Objetivo | Que cargue rápido y se vea bien | Que se encuentre en buscadores y plataformas |
| Qué se toca | Códec, bitrate, resolución, streaming, póster, carga | Título, descripción, transcripción, datos estructurados, miniatura |
| Quién lo hace | Desarrollo web o técnico de vídeo | SEO o marketing de contenidos |
| Cómo se mide | Peso, tiempo de inicio, rebuffering, LCP | Impresiones, clics, posiciones, visualizaciones |
03 Códecs de vídeo: H.264, H.265, VP9 y AV1
El códec es el algoritmo que comprime y descomprime el vídeo; el contenedor (MP4, WebM) es el archivo que guarda el vídeo, el audio y los metadatos. La elección del códec es la decisión que más influye en el peso final.
| Códec | Año | Compresión | Compatibilidad y licencia |
|---|---|---|---|
| H.264 / AVC | 2003 | Referencia | Reproducción prácticamente universal en navegadores y dispositivos; formato de subida recomendado por YouTube |
| H.265 / HEVC | 2013 | Entre un 25 % y un 50 % mejor que H.264 a igual calidad | Buen soporte en hardware, pero licencias de patentes más caras que AVC han frenado su adopción en la web |
| VP9 | 2013 | Mejor que H.264 | Desarrollado por Google, libre de regalías, usado en WebM y en YouTube |
| AV1 | 2018 | Mejor que VP9 y H.264 (en torno a un 50 % frente a x264 en pruebas de Facebook de 2018) | Libre de regalías (Alliance for Open Media); Chrome 70+ y Firefox 67+; en Safari, con decodificación por hardware en equipos recientes |
04 Bitrate, resolución y fotogramas: cómo ajustar el peso
El bitrate (tasa de bits) es la cantidad de datos por segundo de vídeo, en Mbps. A más bitrate, más calidad y más peso, pero a partir de cierto punto la mejora deja de verse. En lugar de fijar un bitrate constante, los codificadores modernos permiten codificar por calidad objetivo (modo CRF en x264 o x265), que reparte los bits donde la imagen los necesita.
| Resolución | 24, 25 o 30 fps | 48, 50 o 60 fps |
|---|---|---|
| 1080p | 8 Mbps | 12 Mbps |
| 2160p (4K) | 35-45 Mbps | 53-68 Mbps |
- ✓Esas cifras son para subir a una plataforma que recodifica: para servir desde tu web puedes usar bastante menos.
- ✓Mantén la misma frecuencia de fotogramas con la que se grabó el vídeo.
- ✓Para un vídeo de fondo, 720p y pocos segundos en bucle suelen bastar.
- ✓Elimina la pista de audio de los vídeos que siempre van silenciados.
- ✓En MP4, coloca el índice (moov atom) al principio del archivo («fast start») para que empiece a reproducirse antes de descargarse entero.
05 Streaming adaptativo: HLS, DASH y CDN
Un único archivo MP4 obliga a elegir entre calidad y velocidad para todos los usuarios. El streaming adaptativo codifica el vídeo en varias calidades (una «escalera» de resoluciones y bitrates), lo divide en segmentos de pocos segundos y deja que el reproductor cambie de calidad según la conexión de cada momento. Es la base del streaming moderno.
HLS
HTTP Live Streaming, creado por Apple y publicado como RFC 8216 en agosto de 2017. Soporte nativo en Safari e iOS; en otros navegadores se reproduce con librerías JavaScript.
MPEG-DASH
Estándar internacional ISO/IEC 23009-1, independiente del códec. Muy usado en plataformas de streaming y reproductores web.
CDN
Red de servidores que entrega los segmentos desde el punto más cercano al usuario y reduce el tiempo de inicio.
06 Optimizar la carga del vídeo en una página web
| Técnica | Qué hace | Cuándo usarla |
|---|---|---|
| poster | Muestra una imagen mientras el vídeo carga | Siempre; que sea ligera (WebP o AVIF) |
| preload="none" o "metadata" | Evita descargar el vídeo (o todo menos los metadatos) hasta que se reproduce | Vídeos que inicia el usuario |
| loading="lazy" | Retrasa la carga hasta que el vídeo se acerca a la pantalla | Vídeos por debajo de la primera pantalla; comprueba el soporte del navegador o usa IntersectionObserver |
| autoplay muted loop playsinline | Reproduce en bucle y en silencio, como un GIF | Sustituir GIF animados, que pesan mucho más |
| Fachada del reproductor | Carga una miniatura y el iframe de YouTube o Vimeo solo al hacer clic | Vídeos incrustados de plataformas externas |
El vídeo también cuenta para las Core Web Vitals: si está en la primera pantalla puede ser el elemento LCP, con el tiempo del póster o del primer fotograma. Revisa su efecto con Google PageSpeed antes y después de optimizarlo, y si es el vídeo principal de una campaña, aplica lo que explicamos sobre la video landing page.
07 Subtítulos y accesibilidad del vídeo
Un vídeo optimizado también es un vídeo que todo el mundo puede entender. Las WCAG exigen subtítulos para el audio del vídeo pregrabado (criterio 1.2.2, nivel A), subtítulos en directo (1.2.4, nivel AA) y audiodescripción o alternativa para el vídeo pregrabado (1.2.5, nivel AA). En la web, los subtítulos se añaden con una pista en formato WebVTT mediante el elemento <track>.
Además de la norma técnica, en España y la UE hay obligaciones legales de accesibilidad web que alcanzan a muchas empresas desde 2025.
- ✓Subtítulos en archivo WebVTT, no solo incrustados en la imagen.
- ✓Transcripción en texto para vídeos largos o explicativos.
- ✓Controles de reproducción accesibles con teclado.
- ✓Botón de pausa para cualquier vídeo que se reproduzca solo durante más de 5 segundos.
08 Checklist de optimización de vídeo
-
1
Recorta y exporta a la resolución real de uso
No sirvas 4K en un bloque que se ve a 800 píxeles de ancho.
-
2
Codifica en dos formatos
AV1 o VP9 en WebM y H.264 en MP4 como respaldo, con fast start.
-
3
Decide la entrega
Archivo progresivo para clips cortos; HLS o DASH con CDN para vídeos largos o muy vistos.
-
4
Integra con carga ligera
Póster optimizado, preload mínimo, carga diferida y fachada para reproductores externos.
-
5
Añade subtítulos y controles
Pista WebVTT, pausa accesible y transcripción cuando aporte.
-
6
Mide
Peso transferido, LCP, tiempo hasta el primer fotograma y rebuffering en móvil real.
Si tu web arrastra vídeos pesados, imágenes sin comprimir y scripts de terceros, la solución suele ser un trabajo conjunto de optimización de la velocidad web. Y si vas a rehacer la página, planificarlo desde un diseño web a medida evita tener que optimizar después.
Preguntas frecuentes sobre Video Optimization
Es el trabajo técnico para que un vídeo pese menos y se reproduzca rápido y bien: elegir códec, bitrate y resolución, servirlo con streaming adaptativo, cargarlo de forma diferida y añadir subtítulos.
H.264 en MP4 es el más compatible. AV1 comprime bastante más y está libre de regalías, pero conviene servirlo junto a H.264 como respaldo para los navegadores y dispositivos que no lo decodifican.
H.265 (HEVC) ofrece entre un 25 % y un 50 % más de compresión a igual calidad, pero sus licencias son más caras y su adopción en navegadores ha sido más lenta, por eso H.264 sigue siendo el estándar de compatibilidad.
Exporta a la resolución real de uso, usa un códec eficiente con codificación por calidad (CRF), elimina el audio si va silenciado y recorta la duración. La pérdida visible suele ser mínima.
Es servir el vídeo en varias calidades divididas en segmentos para que el reproductor cambie de calidad según la conexión. Los protocolos más usados son HLS y MPEG-DASH.
Sí. Un vídeo en la primera pantalla puede ser el elemento LCP y su descarga compite con el resto de recursos. Póster ligero, preload mínimo y carga diferida reducen el impacto.
No. La optimización técnica trata el archivo y su carga; el video SEO trata títulos, descripciones, transcripciones y datos estructurados para aparecer en buscadores.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗