Cómo hacer más pequeños los archivos de video web con el códec AV1 (2025)

• Usar el formato de video AV1 más reciente puede reducir el tamaño de los archivos de video en la web entre 20 y 40 veces
• YouTube y Netflix adoptaron AV1 como códec de video de próxima generación, y es compatible con los principales navegadores como Chrome, Safari y Firefox
• Esta guía explica estrategias de codificación con el códec AV1 y métodos de optimización

Resumen de códecs y contenedores

• Formatos de imagen estática: WebP, JPEG y PNG son compatibles con la mayoría de los navegadores. En los navegadores modernos también se puede usar AVIF
• Estructura de un archivo de video:
  • Códec de video: H.264, HEVC, VP9, AV1, etc., determinan la estrategia de compresión del video
  • Códec de audio: MP3, Opus, AAC, etc., determinan la estrategia de compresión del audio
  • Contenedor: MP4, MOV, WebM, etc., almacenan los flujos de video y audio, subtítulos y metadatos

Introducción al códec AV1

• El códec AV1 se lanzó por primera vez en marzo de 2018
• Puede generar archivos hasta 30–50% más pequeños que HEVC/VP9 y H.264/VP8
• Ventajas:
  • Puede mantener alta calidad de imagen con tasas de bits bajas
  • Casi no hay pérdida por compresión
• Desventajas:
  • La velocidad de codificación es lenta
  • Solo es compatible con dispositivos recientes (iPhone 15+, MacBook M3, etc.)
  • Para compatibilidad, hay que preparar tanto la versión AV1 como la H.264

Cómo usar AV1 hoy en día

• Elección de contenedor y códec
  • Contenedor: MP4 es el más popular y el recomendado
  • Códec de audio: se recomienda usar Opus (eficiente y gratuito)
• Preparación de archivos para máxima compatibilidad
  • Para escritorio y navegadores móviles modernos (Chrome, Safari, Firefox, Edge, etc.)
    • Contenedor MP4 + códec de video AV1 + códec de audio Opus
    • Cobertura de usuarios: alrededor del 74% (a septiembre de 2023)
  • Para Safari y macOS antiguos
    • Contenedor MP4 + códec de video H.264 + códec de audio AAC
    • Cobertura de usuarios: alrededor del 19%
  • Para reforzar el soporte de iPhone y Mac antiguos (opcional)
    • Contenedor MP4 + códec de video HEVC + códec de audio AAC

Cómo crear archivos de video AV1

1. Instalar FFmpeg

• Mac: brew install ffmpeg
• Linux: instala FFmpeg desde tu distribución
• Windows: consulta la guía de instalación

2. Crear un archivo H.264 (para compatibilidad con dispositivos antiguos)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. Crear un archivo AV1 (para compatibilidad con dispositivos modernos)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
• Puedes ajustar el valor de crf o qp para equilibrar calidad de imagen y tamaño de archivo

4. Crear un archivo HEVC (si hace falta)

• Codifica en HEVC para dar soporte a iPhone y Mac más antiguos
• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

Explicación de las principales opciones de FFmpeg

• -i SOURCE.mov: configura el archivo de entrada original
• -map_metadata -1: elimina metadatos innecesarios
• -c:a libopus: selecciona el códec de audio (Opus)
• -c:v libsvtav1: selecciona el códec de video (AV1)
• -crf 34, -qp 30: ajustan la calidad de imagen y el tamaño del archivo (cuanto menor el valor, mejor la calidad y mayor el tamaño)
• -preset veryslow: ajusta la velocidad de codificación para generar archivos de alta calidad
• -pix_fmt yuv420p: reduce los datos de color para disminuir el tamaño del archivo
• -movflags +faststart: reduce el tiempo de inicio del streaming
• -tile-columns 2 -tile-rows 2: mejora la velocidad de codificación

Configuración de compatibilidad entre navegadores

• Usa AV1 en navegadores modernos y reemplázalo por H.264 en navegadores antiguos

  <video controls width="600" height="400">  
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
    <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
  </video>  
  

• Si necesitas soporte para iPhone y Mac antiguos, también puedes agregar un archivo HEVC

  <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">  
  

Convertir GIF a AV1 o H.264

• Los GIF son 20–40 veces más grandes que H.264 y AV1, y además consumen mucho CPU y energía → se recomienda convertirlos
• Conversión de GIF → H.264
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
• Conversión de GIF → AV1
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4
• Ejemplo para reemplazar GIF en HTML

  <video autoplay loop muted playsinline width="600" height="400">  
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
    <source src="animation.h264.mp4" type="video/mp4">  
  </video>  
  

[laeyoung]

Como se usan muchos videos en las landing pages, podría valer la pena probarlo. Habrá que ver si funciona bien o si aparecen casos excepcionales que impidan usarlo.