Uma atualização sobre como o AVIF foi adotado no ecossistema.
O AVIF é um novo formato de imagem que está ganhando popularidade rapidamente na Web devido às altas taxas de compactação, ao desempenho eficiente e à ampla adoção. O AVIF é um formato de imagem aberto e livre de royalties, baseado no codec de vídeo AV1 padronizado pela Alliance for Open Media. Esta postagem do blog traz uma visão geral de como o AVIF é adotado no ecossistema e os tipos de benefícios de desempenho e qualidade que os desenvolvedores podem esperar do AVIF para imagens estáticas e animações.
Quais as novidades do ecossistema AVIF?
Desde o lançamento do AVIF no Chrome, Firefox e Safari, o uso desse recurso na Web tem crescido de forma contínua. Atualmente, quase todos os navegadores são compatíveis com ele.
Somente no Chrome, o uso do AVIF cresceu para aproximadamente 1% em pouco mais de um ano depois que o Chrome adicionou a compatibilidade com o AVIF na versão estável.
Atualmente, várias CDNs de imagens, como Akamai, Cloudflare, Cloudinary e Imgix, disponibilizam imagens AVIF. Em uma postagem do blog (link em inglês) anunciando o suporte a AVIF, o Imgix relatou uma economia de 60% no tamanho do arquivo em comparação com JPEG e 35% de economia em comparação com WebP. Essa redução do tamanho do arquivo resulta em uma economia significativa de armazenamento, mas também ajuda a carregar as páginas mais rapidamente, gerando maior Maior exibição de conteúdo (LCP). A LCP é uma das Core Web Vitals e representa a velocidade de carregamento do maior bloco de conteúdo da página. O uso de codecs modernos para compactar imagens é uma das principais técnicas para reduzir a LCP. O Lighthouse é uma ótima ferramenta para desenvolvedores do Chrome que testa seu site e quanta economia o AVIF traria.
O WordPress é a plataforma de sites mais conhecida do mundo, e há vários plug-ins disponíveis para os desenvolvedores converterem imagens em AVIF, como os seguintes:
- AutoOptimize
- Convertido para mídia
- Otimizador de imagem EWWW
- Optimole (link em inglês)
- Otimizador de imagens do ShortPixel
Para mais desenvolvedores práticos, ferramentas como ImageMagick e FFmpeg são um bom ponto de partida.
Velocidade de codificação AVIF
A rápida velocidade de codificação e a alta qualidade visual são fundamentais para implantar a compactação de imagens em grande escala. A velocidade de codificação do software AVIF melhorou significativamente nos últimos dois anos. Em comparação com outros formatos modernos de imagem estática, o AVIF produz arquivos menores com qualidade visual semelhante (consulte o gráfico a seguir, quanto mais baixo, melhor), mas também é mais rápido para codificar.
O gráfico abaixo (mais alto é melhor) ilustra como a velocidade de codificação AVIF se compara a outros formatos de imagem. Codecs de geração anterior, como WebP, se beneficiam dos algoritmos de compactação menos complexos (mas também menos eficientes). Com um esquema de codificação multithread, o AVIF alcança um desempenho semelhante para casos de uso comuns, proporcionando ganhos de compactação significativos.
Para desenvolvedores interessados em comparações mais detalhadas de velocidade de codificação e qualidade visual, o site Image Coding Comparisons (link em inglês) contém resultados de comparativos de mercado reproduzíveis.
Embora as implementações de software para codecs de imagem modernos, como AVIF e WebP, sejam otimizadas para arquiteturas de processadores x86 e ARM, a compactação de grandes quantidades de imagens em escala pode ser computacionalmente cara. Uma alternativa para reduzir os custos de compactação é usar a aceleração de hardware. A Bluedot desenvolveu um codificador Pulsar-AVIF acelerado por hardware para execução em FPGAs programáveis, como o Alveo U250 da AMD. Em comparação com o avifenc baseado em software, o Pulsar-AVIF oferece uma melhoria de velocidade de 7 a 23 vezes com uma eficiência de compactação semelhante.
- Conjunto de teste: Kodak (24 imagens de 768 x 512)
- Codificação de 24 imagens simultaneamente (24 processos)
- Cada processo de codificação de software é executado com quatro linhas de execução. (-j 4)
Os desenvolvedores podem implantar o codificador Pulsar-AVIF com máquinas virtuais na nuvem, como o Azure NP-Series.
Recursos AVIF para páginas da Web responsivas
O AVIF tem alguns recursos interessantes que ajudam a fornecer páginas da Web mais responsivas. Desta vez, falaremos um pouco sobre as AVIFs animadas, que são de longe a maneira mais eficiente de exibir animações legais na web.
AVIF animado
O GIF animado ainda é um formato popular para imagens animadas, apesar de ter 35 anos. As maiores desvantagens dos GIFs animados são o suporte para apenas 256 cores e a baixa compactação, o que leva a tamanhos de arquivo muito grandes, ao mesmo tempo que limita a resolução ou o frame rate para casos de uso práticos. Por outro lado, a codificação AVIF animada é na verdade o mesmo esquema de codificação de vídeo AV1, que proporciona uma economia significativa no tamanho do arquivo em comparação com o GIF animado.
Executamos uma comparação simples em que codificamos um conjunto de GIFs animados para AVIF e JPEG XL. No conjunto de teste, a porcentagem média de economia no tamanho dos arquivos foi de aproximadamente 86% em comparação com os arquivos GIF originais e cerca de 73% em comparação com os arquivos JPEG XL animados*.
O Chrome, o Firefox e o Safari são compatíveis com reproduções animadas de AVIF.
O FFmpeg é uma ferramenta usada para criar arquivos AVIF animados. Confira um exemplo básico de conversão de um GIF para AVIF usando o FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF é a qualidade de saída desejada em uma escala de 0 a 63. Valores mais baixos significam melhor qualidade e maior tamanho de arquivo. 0 usa compactação sem perdas. Comece com um valor de 23 para pequenos arquivos AVIF animados.
O FFmpeg usa libaom por padrão para codificar imagens AVIF, mas também pode usar rav1e ou SVT-AV1, quando disponíveis. Acesse o guia de codificação AV1 do FFmpeg para saber mais sobre as opções de codificadores e como ajustar os parâmetros de codificação para garantir velocidade e qualidade.
Outro caso de uso é reempacotar um vídeo AV1 em AVIF sem recodificar o arquivo original. Isso é significativamente mais barato do que decodificar/codificar o arquivo AV1 original e disponibiliza o vídeo AV1 para uso com o elemento <img>. A transmissão de -c:v copy para o FFmpeg pode fazer isso.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Conclusões
O uso do AVIF na Web tem aumentado constantemente desde o lançamento e é amplamente compatível com navegadores, CDNs de imagens, plug-ins do WordPress e ferramentas de codificação. Resumindo, o AVIF é uma ótima opção para mostrar imagens na Web. Ele é rápido de codificar e decodificar, oferecendo a melhor qualidade ou o menor tamanho de arquivo, o que você preferir para o seu site. O AVIF é a maneira mais eficiente de exibir animações na Web. Se você tiver dúvidas, comentários ou solicitar recursos, entre em contato na lista de e-mails av1-discuss, na comunidade AOM do GitHub e na wiki do AVIF (em inglês).