Desarrollo24 de julio de 2026

Cómo crear vídeo optimizado para la web con ffmpeg y los códecs VP9 y H265

Cada año, el desarrollo web moderno sube el listón en rendimiento. Los frameworks compiten optimizando peticiones de red, imágenes y código para conseguir cargas rapidísimas. En el caso de las imágenes, casi cualquier framework, headless CMS o CDN ofrece opciones de optimización integradas. Por desgracia, no se puede decir lo mismo de los vídeos.

Aun así, hay solución. Los códecs de vídeo modernos ofrecen una calidad excelente con un tamaño muy razonable. Un vídeo bien optimizado siempre es mejor opción para animaciones que un GIF y, a veces, supera incluso a las implementaciones nativas. En este artículo verás qué son los códecs VP9 y H265 y cómo optimizar vídeo con la herramienta ffmpeg.

Una cosa son los formatos y otra los códecs

Es un tema que se presta a confusión, así que conviene tener clara la diferencia. Piensa en el formato de vídeo como un contenedor que define la estructura del archivo que transporta las pistas de vídeo y audio. Esas pistas, dentro del contenedor, son datos multimedia codificados con un códec. Algunos formatos de vídeo populares son mp4, WebM o MKV. Entre los códecs más conocidos están H264, H265 y VP8/9.

Aclarado esto, lo siguiente que debes saber es que no todos los códecs sirven para todos los formatos. En WebM se usan VP8 y VP9, mientras que en mp4 puede ir casi cualquier cosa.

Por ejemplo, el vídeo de arriba, de la web del nuevo MacBook Air de Apple, usa el formato mp4, pero si miras más a fondo verás que emplea el códec H264. H264 es muy popular, pero está mucho menos optimizado que VP9 o H265.

WebM y VP9

WebM es un formato de archivo multimedia abierto y libre de royalties, diseñado para la web. Puede contener pistas de vídeo comprimidas con los códecs VP8 o VP9 y pistas de audio comprimidas con los códecs Vorbis u Opus.

Permite ahorrar entre un 20 y un 50 % de tamaño frente a H264 manteniendo el mismo nivel de calidad. Lo admiten todos los navegadores modernos de escritorio y móvil, salvo Safari en iOS. Apple incorporó WebM a Safari de escritorio a partir de macOS Big Sur, pero a día de hoy no ha avanzado nada en su versión móvil.

Pero no te preocupes: hay una alternativa sólida para los usuarios de iOS.

MP4 y H265

H265, también conocido como HEVC (High-Efficiency Video Coding), es un códec compatible con los dispositivos de Apple que ofrece esa misma mejora del 20-50 % en eficiencia respecto a su hermano mayor, H264. No está libre de royalties, y quizá por eso su adopción es bastante menor que la de WebM.

Así que, combinando con cabeza webm + VP9 y mp4 + H265 para tus vídeos, puedes llegar a una cobertura global del 94 %.

Herramientas para optimizar vídeo

Las dos herramientas más populares para optimizar vídeo son Handbrake y ffmpeg. Handbrake tiene interfaz gráfica, lo que lo hace mucho más fácil de usar; sin embargo, ffmpeg es más flexible si quieres renderizar vídeos con canal alfa (transparencia) o usar aceleración por hardware, que acelera muchísimo la compresión. Además, a mí me resulta mucho más cómodo compartir con el equipo un único comando de ffmpeg que explicar dónde hay que hacer clic en Handbrake.

Instalación de ffmpeg

Si usas macOS, instálalo con brew.


brew install ffmpeg

Para el resto de sistemas, sigue las instrucciones de la web oficial.

Conceptos básicos de ffmpeg

ffmpeg es una herramienta de línea de comandos con muchísimas opciones que conviene conocer. Si estás empezando, basta con ejecutar:


ffmpeg -i input.mp4 output.webm

El resultado será un WebM codificado con VP9 y con una compresión bastante decente de serie. Si quieres dominar la herramienta, tendrás que aprender a usar los flags.

Para que se vea mejor, te voy a mostrar cómo cada opción de ffmpeg reduce el tamaño del archivo y afecta a la calidad. Todas las pruebas se han hecho con una animación creada para un proyecto reciente.

El vídeo original pesa unos 26 MB y tiene una resolución de 5000x2700.

Pero con una compresión básica ya se queda en 1 MB. No está mal, ¡pero se puede mejorar! 🚀

Hay unas cuantas opciones de ffmpeg que sirven tanto si usas H265 como VP9:

-an: elimina la pista de audio. Aunque el archivo no tenga sonido, puede incluir información de una pista de audio vacía que añade peso, así que úsalo siempre en vídeos sin sonido.

-vf: la opción para pasarle filtros a ffmpeg. El caso de uso más habitual es el escalado.


ffmpeg -i input.mp4 -vf scale=3840:-2 -an output.webm

Como te decía, la resolución original es de 5000x2700, pero no se muestra a ese tamaño, así que puedes reducirla a lo que realmente necesita la página. En este caso, 3840 px de ancho. La opción de escalado mantiene la relación de aspecto del vídeo original si le pasas el width y un parámetro adicional con valores posibles -1, -2 o -n. El valor -2 garantiza que la resolución resultante sea par. Para saber más, echa un vistazo a esta estupenda demo aquí.

Si ejecutas el comando anterior, el vídeo baja a 542 KB.

Ajustes avanzados

Además de los argumentos anteriores, los códecs VP9 y H265 de ffmpeg aceptan el flag -crf. Activa el modo de calidad constante, que garantiza un nivel de calidad perceptual determinado en todo el vídeo. Se le pasa un número de 0 a 63 (VP9) o de 0 a 51 (H265), donde 0 es la mejor calidad y el valor máximo, la peor.

Cualquier valor entre 18 y 40 puede dar una calidad muy decente. Si omites esta opción, ffmpeg usa -crf 32 por defecto para VP9.


ffmpeg -i input.mp4 -crf 40 -vf scale=3840:-2 -an output.webm

Resultado: 314 KB.

Vamos acercándonos a las opciones específicas de cada códec, pero antes veamos cómo indicarle a ffmpeg de forma explícita qué códec usar, en lugar de dejarlo en automático. Para ello tienes el flag -c:v. Algunas opciones interesantes:

libvpx-vp9: la que se usa por defecto al convertir a WebM con el códec VP9

libx265: para el códec H265 y el contenedor mp4

hevc_videotoolbox: para H265 con aceleración por hardware

Ejemplo:


ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 40 -vf scale=3840:-2 -an output.webm

Particularidades de VP9

libvpx-vp9 tiene la opción -deadline, que acepta los siguientes valores:

good es el valor por defecto y el recomendado para la mayoría de casos.
best es el recomendado si tienes tiempo de sobra y quieres la máxima eficiencia de compresión.
realtime es el recomendado para codificación en directo o rápida.

Usar best puede ahorrarte unos KB extra.


ffmpeg -i input.mp4 -crf 40 -deadline best -vf scale=3840:-2 -an output.webm

Resultado: 295 KB en total.

Es el momento de pasar a H265 y libx265. Es una librería muy eficiente pero, por desgracia, no usa aceleración por hardware, así que la codificación tarda bastante. Para H265 necesitas conocer algunas opciones más.

-preset es parecido a deadline en VP9, pero acepta muchos más valores:

ultrafast
superfast
veryfast
faster
fast
medium (por defecto)
slow
slower
veryslow
placebo

placebo es el más lento pero, según las pruebas oficiales, apenas mejora la codificación. Por eso es más sensato usar veryslow.

Otro flag que puedes pasar es -movflags faststart. Optimiza el vídeo para la web y hace que esté listo antes para reproducirse. No lo hemos usado con VP9 en WebM porque su arquitectura no lo necesita y siempre garantiza carga progresiva.

Y por último, -tag:v hvc1, que hace que el vídeo funcione en dispositivos iOS y macOS. El comando queda así:


ffmpeg -i input.mp4 -movflags faststart -c:v libx265 -vf scale=3840:-2 -crf 32 -preset veryslow -tag:v hvc1 -an output.mp4

¡Y así llegamos a 260 KB!

Seguramente te has fijado en que para H265 hemos usado -crf 32, mientras que para VP9 era -crf 40. Ambos valores dan un bitrate muy parecido en los dos vídeos; la diferencia es solo de sintaxis, porque el rango de números aceptado es distinto.

Ventajas e inconvenientes de la librería `hevc_videotoolbox` para `H265`

hevc_videotoolbox es una librería exclusiva de macOS que ofrece aceleración por hardware nativa para codificar en H265. Es dos órdenes de magnitud más rápida que libx265, pero tiene sus pegas: optimiza peor y no dispone del modo de calidad constante (-crf) ni de los presets del ejemplo anterior. Como alternativa a -crf puedes usar -b:v, que permite definir manualmente el bitrate del vídeo (más información).


ffmpeg -i input.mp4 -movflags faststart -c:v hevc_videotoolbox -vf scale=3840:-2 -an -tag:v hvc1 output.mp4

Resultado: 654 KB.

La única ventaja de hevc_videotoolbox frente a libx265 es que permite codificar vídeos en H265 con canal alfa.

Enfocar el vídeo

En algunos vídeos puedes probar a bajar la resolución, pero en pantallas retina la imagen puede verse borrosa. Prueba a aplicar el filtro unsharp como se muestra a continuación para mejorar la calidad percibida manteniendo una resolución baja:


ffmpeg -i input.mp4 -crf 40 -deadline best -vf scale=1920:-2,unsharp=5:5:1.0 -an output.webm -vf

Por ejemplo, 5:5:1.0 da un enfoque medio; para uno suave, prueba con 3:3:1.0, y para uno fuerte, usa 9:9:1.0. Puedes consultar esta documentación para más detalles.

La percepción de la calidad en imágenes en movimiento es muy distinta a la de las imágenes estáticas, así que trucos como este ayudan a que el vídeo se vea bien incluso si reduces todavía más su tamaño.

Con enfoque

Sin enfoque

Alternativas al modo de calidad constante

ffmpeg ofrece más ajustes de optimización de vídeo, como Constrained Quality, codificación en dos pasadas, bitrate constante y Lossless. Pero o bien alargan mucho el tiempo de codificación, o bien exigen más pruebas para dar con el bitrate adecuado y conseguir resultados similares a los que obtienes con el modo de calidad constante (crf).

Resumen

Optimizar vídeo para la web con ffmpeg en casos sencillos es bastante directo y basta con ejecutar dos comandos:

WebM (VP9)


ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 40 -vf scale=3840:-2 -deadline best -an output.webm

Desglose de flags del comando:

-c:v libvpx-vp9 define qué códec usar
-crf 40 define los ajustes del modo de calidad constante
-vf scale=3840:-2 define los ajustes del filtro de escalado
-deadline best ajusta el equilibrio velocidad/calidad de la compresión
-an elimina el audio

MP4 (H265)


ffmpeg -i input.mp4 -c:v libx265 -crf 32 -vf scale=3840:-2 -preset veryslow -tag:v hvc1 -movflags faststart -an output.mp4