Como reduzir arquivos de vídeo para web com o codec AV1 (2025)

• Usar o formato de vídeo AV1 mais recente pode reduzir o tamanho dos arquivos de vídeo na web em 20 a 40 vezes
• YouTube e Netflix adotaram o AV1 como codec de vídeo de próxima geração, e ele é compatível com os principais navegadores, como Chrome, Safari e Firefox
• Este guia explica estratégias de codificação com o codec AV1 e formas de otimização

Visão geral de codecs e contêineres

• Formatos de imagem estática: WebP, JPEG e PNG são compatíveis com a maioria dos navegadores. Em navegadores modernos, também é possível usar AVIF
• Estrutura de arquivos de vídeo:
  • Codec de vídeo: define a estratégia de compressão de vídeo, como H.264, HEVC, VP9 e AV1
  • Codec de áudio: define a estratégia de compressão de áudio, como MP3, Opus e AAC
  • Contêiner: MP4, MOV e WebM, entre outros, armazenam fluxos de vídeo e áudio, legendas e metadados

Introdução ao codec AV1

• O codec AV1 foi lançado pela primeira vez em março de 2018
• Pode gerar arquivos até 30~50% menores em comparação com HEVC/VP9 e H.264/VP8
• Vantagens:
  • Mantém alta qualidade de imagem mesmo com bitrate baixo
  • Quase não há perda de compressão
• Desvantagens:
  • A velocidade de codificação é lenta
  • Compatível apenas com dispositivos mais recentes (iPhone 15+, MacBook M3 etc.)
  • É necessário preparar versões em AV1 e H.264 para garantir compatibilidade

Como usar AV1 agora mesmo

• Escolha de contêiner e codec
  • Contêiner: MP4 é o mais popular e recomendado
  • Codec de áudio: recomenda-se usar Opus (eficiente e gratuito)
• Preparação dos arquivos para máxima compatibilidade
  • Para desktop e navegadores móveis modernos (Chrome, Safari, Firefox, Edge etc.)
    • Contêiner MP4 + codec de vídeo AV1 + codec de áudio Opus
    • Cobertura de usuários: cerca de 74% (em setembro de 2023)
  • Para Safari e macOS mais antigos
    • Contêiner MP4 + codec de vídeo H.264 + codec de áudio AAC
    • Cobertura de usuários: cerca de 19%
  • Para reforçar o suporte a iPhone e Mac mais antigos (opcional)
    • Contêiner MP4 + codec de vídeo HEVC + codec de áudio AAC

Como gerar arquivos de vídeo AV1

1. Instalar o FFmpeg

• Mac: brew install ffmpeg
• Linux: instale o FFmpeg pela distribuição
• Windows: consulte o guia de instalação

2. Gerar um arquivo H.264 (para compatibilidade com dispositivos antigos)

• 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. Gerar um arquivo AV1 (para compatibilidade com 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
• É possível ajustar o valor de crf ou qp para equilibrar qualidade de imagem e tamanho do arquivo

4. Gerar um arquivo HEVC (se necessário)

• Codificação em HEVC para dar suporte a iPhones e Macs mais antigos
• 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

Explicação das principais opções do FFmpeg

• -i SOURCE.mov: define o arquivo de origem como entrada
• -map_metadata -1: remove metadados desnecessários
• -c:a libopus: escolhe o codec de áudio (Opus)
• -c:v libsvtav1: escolhe o codec de vídeo (AV1)
• -crf 34, -qp 30: ajustam qualidade de imagem e tamanho do arquivo (quanto menor, melhor a qualidade e maior o tamanho)
• -preset veryslow: define a velocidade de codificação para gerar arquivos de alta qualidade
• -pix_fmt yuv420p: reduz os dados de cor para diminuir o tamanho do arquivo
• -movflags +faststart: reduz o tempo de início do streaming
• -tile-columns 2 -tile-rows 2: melhora a velocidade de codificação

Configuração de compatibilidade com navegadores

• Use AV1 em navegadores modernos e recorra a H.264 em navegadores antigos

  <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>  
  

• Ao dar suporte a iPhones e Macs antigos, também é possível adicionar um arquivo HEVC

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

Converter GIF em AV1 ou H.264

• GIFs são 20 a 40 vezes maiores do que H.264 e AV1 e também consomem muito mais CPU e energia → recomenda-se converter
• Conversão 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
• Conversão 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
• Exemplo de substituição de GIF em 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 landing pages usam vídeo com frequência, talvez valha a pena testar. Ver se funciona bem ou se surgem casos excepcionais que impeçam o uso.