Como implantar o AVIF em sites mais responsivos

Uma atualização sobre como o AVIF foi adotado no ecossistema.

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

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.

Desde a introdução do AVIF no Chrome, Firefox e Safari, o uso do AVIF na Web tem crescido constantemente; atualmente, quase todos os navegadores são compatíveis com o 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.

Um gráfico de linhas do uso do AVIF no Chrome de maio de 2021 a março de 2023. O suporte aumentou constantemente de 0% para pouco menos de 1,4%.

Vários CDNs de imagem, como Akamai, Cloudflare, Cloudinary e Imgix, estão exibindo imagens AVIF. Em uma postagem de blog anunciando o suporte ao AVIF, a Imgix relatou uma economia de 60% no tamanho do arquivo em comparação com o JPEG e de 35% em comparação com o 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 popular do mundo, e há vários plug-ins disponíveis para que os desenvolvedores convertam suas imagens para o AVIF, como:

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.

Um gráfico de barras comparando vários tamanhos de arquivo de codec de imagem como uma porcentagem da saída de TurboJPEG. O AVIF é o menor, depois o JPEG XL, o WebP e, por fim, o MozJPEG.

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 multi-thread, o AVIF alcança um desempenho semelhante para casos de uso comuns, proporcionando ganhos de compressão significativos.

Comparação da velocidade de codificação do codec de imagem. Os codificadores comparados são AVIF médio, JPEG XL médio, WebP médio (uma linha de execução) e MozJPEG médio (um thread). O AVIF geralmente é um dos codificadores de imagem mais rápidos em termos de melhor qualidade e esforço padrão, mas é o mais lento de todos os codificadores para desempenho em tempo real.

Para desenvolvedores interessados em comparações de velocidade de codificação e qualidade visual mais detalhadas, o site Image Coding Comparisons inclui resultados reproduzíveis de comparativos de mercado.

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.

Codificador Tempo de codificação (ms) Quadros por segundo Uso da CPU Especificação de hardware
Pulsar-AVIF
(FPGA)
60 409,85 305% AMD Alveo U250 1ea + CPU Intel(R) Xeon(R)
Platinum 8171 a 2,6 GHz, 10 núcleos
avifenc
(libaom)
405 59,26 3.200% CPU Intel(R) Xeon(R) Platinum 8370C a
2,8 GHz, 32 núcleos
avifenc
(SVT-AV1)
1325 18.11 3.200% CPU Intel(R) Xeon(R) Platinum 8370C a
2,8 GHz, 32 núcleos
Comparação da velocidade de codificação do AVIF
  • 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*.

Uma comparação do desempenho do codec de imagem animada. O AVIF supera os formatos GIF e JPEG XL em termos de tamanho médio e mediano de arquivo.
* libavif e libjxl versões: libavif versão 4cff6a3 (libaom versão v3.5.0), libjxl versão 176b1c03. Conjunto de testes: 15 GIFs de exemplo da Wikipédia.

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 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 opções de codificador e o ajuste dos parâmetros de codificação para compensações entre velocidade e qualidade podem ser encontradas no Guia de codificação AV1 do FFmpeg.

Outro caso de uso é reempacotar um vídeo AV1 para AVIF sem recodificar o arquivo original. Isso é significativamente mais barato 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. Resumindo, o AVIF é uma ótima opção para exibir imagens na web; o AVIF é rápido para 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 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.

Imagem principal do Unsplash, por Amal S .