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.
Quais são as novidades do ecossistema AVIF?
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.
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:
- AutoOptimize
- Convertido para mídia
- Otimizador de imagens EWWW
- Optimole (link em inglês)
- Otimizador de imagens ShortPixel
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 multi-thread, o AVIF alcança um desempenho semelhante para casos de uso comuns, proporcionando ganhos de compressão significativos.
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.
- 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 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.