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, desempenho eficiente e ampla adoção. O AVIF é um formato de imagem aberto e sem royalties baseado no codec de vídeo AV1 padronizado pela Alliance for Open Media. Esta postagem do blog vai dar uma visão geral de como o AVIF é adotado no ecossistema e que tipo de desempenho e benefícios de qualidade os desenvolvedores podem esperar do AVIF para imagens estáticas e animações.
O que há de novo no ecossistema AVIF?
Desde a introdução do AVIF no Chrome, Firefox e Safari, o uso do formato na Web tem crescido de forma constante. Quase todos os navegadores oferecem suporte ao AVIF.
No Chrome, o uso do AVIF cresceu para aproximadamente 1% em pouco mais de um ano após a adição do suporte ao AVIF na versão estável.
Vários CDNs de imagem, como Akamai, Cloudflare, Cloudinary e Imgix, estão exibindo imagens AVIF. Em uma postagem do blog anunciando a compatibilidade com o AVIF, o Imgix relatou uma economia de 60% no tamanho de arquivo em comparação com o JPEG e 35% de economia em relação ao WebP. Essas economias de tamanho de arquivo levam a economias significativas de armazenamento, mas também ajudam a carregar as páginas mais rapidamente, resultando em tempos mais rápidos de Largest Contentful Paint (LCP). O LCP é uma das métricas do Core Web Vitals e representa a rapidez com que o maior bloco de conteúdo da página foi carregado. Usar codecs modernos para compactar imagens é uma das técnicas principais para reduzir a LCP. O Lighthouse é uma ótima ferramenta para desenvolvedores do Chrome para testar seu site e conferir quanto o AVIF economizaria.
O WordPress é a plataforma de sites mais usada do mundo, e há vários plug-ins disponíveis para os desenvolvedores converterem imagens em AVIF, como:
- AutoOptimize
- Convertido para mídia
- Otimizador de imagens EWWW
- Optimole (link em inglês)
- ShortPixel Image Optimizer
Para desenvolvedores mais práticos, ferramentas como ImageMagick e FFmpeg são um bom ponto de partida.
Velocidade de codificação do AVIF
A velocidade de codificação rápida e a alta qualidade visual são essenciais para implantar a compactação de imagens em grande escala. A velocidade de codificação de software AVIF melhorou significativamente nos últimos dois anos. Em comparação com outros formatos de imagem estáticas modernos, o AVIF produz arquivos menores com qualidade visual semelhante (consulte o gráfico a seguir, quanto menor, melhor), mas também é mais rápido de codificar.
O gráfico abaixo (quanto maior, melhor) ilustra como a velocidade de codificação do AVIF se compara a outros formatos de imagem. Os codecs de geração anterior, como o WebP, se beneficiam dos algoritmos de compactação menos complexos (mas também menos eficientes). Com um esquema de codificação com várias linhas de execução, o AVIF alcança um desempenho semelhante para casos de uso comuns, além de oferecer ganhos de compressão significativos.
Para desenvolvedores interessados em comparações mais detalhadas de velocidade de codificação e qualidade visual, o site Image Coding Comparisons contém resultados de comparação 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 é explorar a aceleração de hardware. A Bluedot desenvolveu um codificador Pulsar-AVIF com aceleração de hardware 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 eficiência de compactação semelhante.
- Conjunto de testes: 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 do AVIF para páginas da Web responsivas
O AVIF tem alguns recursos interessantes que ajudam a oferecer páginas da Web mais responsivas. Desta vez, vamos nos aprofundar um pouco nos AVIFs animados, 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 a apenas 256 cores e a compressão ruim, que resulta em arquivos muito grandes, além de limitar a resolução ou a taxa de frames para casos de uso práticos. Por outro lado, a codificação animada do AVIF é igual ao esquema de codificação de vídeo AV1, que oferece economia significativa no tamanho do arquivo em comparação com o GIF animado.
Realizamos um comparativo simples em que codificamos um conjunto de GIFs animados para AVIF e JPEG XL. No conjunto de testes, a porcentagem média de economia de tamanho de arquivo foi de aproximadamente 86% em comparação com arquivos GIF originais e de cerca de 73% em comparação com arquivos JPEG XL animados*.
O Chrome, o Firefox e o Safari oferecem suporte a reproduções animadas do AVIF.
O FFmpeg é uma ferramenta a ser usada para criar arquivos AVIF animados. Este é um exemplo básico de como converter 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 tamanho de arquivo maior. O 0 usa a compactação sem perdas. Comece com um valor de 23 para arquivos AVIF animados pequenos.
O FFmpeg usa o libaom por padrão para codificar imagens AVIF, mas também pode usar rav1e ou SVT-AV1, quando disponível. Mais informações sobre as escolhas do codificador e como ajustar os parâmetros de codificação para trocas de velocidade/qualidade podem ser encontradas no guia de codificação AV1 do FFmpeg.
Outro caso de uso é reempacotar um vídeo AV1 em AVIF sem codificar novamente o arquivo original. Isso é muito mais barato do que decodificar/codificar o arquivo AV1 original e disponibiliza o vídeo AV1 para uso com o elemento <img>. Transmitir -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 vem aumentando constantemente desde o lançamento, e ele tem amplo suporte de navegadores, CDNs de imagens, plug-ins do WordPress e ferramentas de codificação. Em geral, o AVIF é uma ótima opção para veicular imagens na Web. Ele é rápido de codificar e decodificar, além de oferecer a melhor qualidade ou o menor tamanho de arquivo, o que você preferir para seu site. O AVIF é a maneira mais eficiente de entregar animações na Web. Se você tiver dúvidas, comentários ou solicitações de recursos, acesse a lista de e-mails av1-discuss, a comunidade AOM no GitHub e o wiki do AVIF.