Frequentemente escrevemos sobre o inchaço em sites devido a imagens, e ferramentas como o Lighthouse destacam quando o carregamento de imagens está tendo um impacto negativo na experiência do usuário, como aumentar o tempo de carregamento ou consumir largura de banda de recursos mais importantes. Uma maneira de corrigir isso é usar a compactação moderna para reduzir o tamanho do arquivo de imagens. Uma nova opção para desenvolvedores da Web é o formato de imagem AVIF. Esta postagem do blog fala sobre atualizações recentes nas ferramentas de código aberto para AVIF, apresenta as bibliotecas de codificação libaom e libavif e inclui um tutorial para usar essas bibliotecas para codificar imagens AVIF de maneira eficiente.
O AVIF é um formato de imagem baseado no codec de vídeo AV1 e padronizado pela Alliance for Open Media. O AVIF oferece ganhos de compactação significativos em relação a outros formatos de imagem, como JPEG e WebP. Embora a economia exata dependa do conteúdo, das configurações de codificação e da meta de qualidade, nós e outros notamos uma economia de mais de 50% em relação ao JPEG.
Além disso, o AVIF adiciona suporte a codecs e contêineres para novos recursos de imagem, como High Dynamic Range e Wide Color Gamut, sintese de grão de filme e decodificação progressiva.
O que há de novo
Desde o lançamento do suporte a AVIF no Chrome M85, o suporte a AVIF no ecossistema de código aberto melhorou em várias frentes.
Libaom
O Libaom é um codificador e decodificador AV1 de código aberto mantido pelas empresas da Alliance for Open Media e usado em muitos serviços de produção do Google e de outras empresas membros. Entre a versão 2.0.0 do libaom, mais ou menos na mesma época em que o Chrome adicionou suporte ao AVIF, e a versão 3.1.0 mais recente, houve otimizações significativas na codificação de imagens estáticas adicionadas à base de código. São eles:
- Otimizações para multiencadeamento e codificação em blocos.
- Redução de 5 vezes no uso de memória.
- Redução de 6,5 vezes no uso da CPU, conforme mostrado no gráfico abaixo.
Essas mudanças reduzem drasticamente o custo de codificação do AVIF, principalmente as imagens carregadas com mais frequência ou de maior prioridade no seu site. À medida que a codificação acelerada por hardware do AV1 se torna mais disponível em servidores e serviços em nuvem, o custo para criar imagens AVIF vai continuar caindo.
Libavif
Libavif, a implementação de referência do AVIF, é um muxer e analisador de código aberto que é usado no Chrome para decodificar imagens AVIF. Ele também pode ser usado com libaom para criar imagens AVIF a partir de imagens não compactadas ou transcodificar imagens da Web (JPEG, PNG etc.).
O libavif adicionou recentemente suporte a uma variedade maior de configurações do codificador, incluindo a integração com configurações mais avançadas do codificador libaom. As otimizações no pipeline de processamento, como a conversão rápida de YUV para RGB usando libyuv e o suporte a alfa pré-multiplicado, aceleram ainda mais o processo de decodificação. Por fim, o suporte ao modo de codificação all-intra adicionado recentemente na libaom 3.1.0 traz todas as melhorias da libaom mencionadas acima.
Como codificar imagens AVIF com avifenc
Uma maneira rápida de experimentar o AVIF é o Squoosh.app. O Squoosh executa uma versão do WebAssembly do libavif e expõe muitos dos mesmos recursos das ferramentas de linha de comando. É uma maneira fácil de comparar o AVIF com outros formatos antigos e novos. Há também uma versão da CLI do Squoosh voltada para apps Node.
No entanto, o WebAssembly ainda não tem acesso a todas as primitivas de desempenho das CPUs. Portanto, se você quiser executar o libavif da maneira mais rápida possível, recomendamos o codificador de linha de comando, avifenc.
Para entender como codificar imagens AVIF, vamos apresentar um tutorial usando a mesma imagem de origem usada no exemplo acima. Para começar, você vai precisar de:
Você também vai precisar instalar os pacotes de desenvolvimento para zlib, libpng e libjpeg. Os comandos para as distribuições Debian e Ubuntu Linux são:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Como criar um codificador de linha de comando avifenc
1. Acessar o código
Confira uma tag de lançamento do libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Mudar o diretório para libavif
cd libavif
Há muitas maneiras diferentes de configurar avifenc e libavif para criar. Confira mais informações em libavif. Vamos criar o avifenc para que ele seja vinculado estaticamente à biblioteca de codificador e decodificador AV1, libaom.
3. Instalar e criar o libaom
Mude para o diretório de dependências externas do libavif.
cd ext
O próximo comando vai extrair o código-fonte do libaom e criar o libaom de forma estática.
./aom.cmd
Mude o diretório para libavif.
cd ..
4. Criar a ferramenta de codificação de linha de comando, avifenc
É recomendável criar um diretório de build para avifenc.
mkdir build
Mude para o diretório de build.
cd build
Crie os arquivos de build para avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Crie avifenc.
make
Você criou o avifenc.
Noções básicas sobre os parâmetros de linha de comando da avifenc
O avifenc usa a estrutura de linha de comando:
./avifenc [options] input.file output.avif
Os parâmetros básicos para avifenc usados neste tutorial são:
| avifenc | |
|---|---|
| --min 0 | Definir o quantizador mínimo para cor como 0 |
| --max 63 | Definir o quantizador máximo para cor como 63 |
| --minalpha 0 | Definir o quantizador mínimo para Alfa como 0 |
| --maxalpha 63 | Definir o quantizador máximo para alfa como 63 |
| -a end-usage=q | Definir o modo de controle de taxa como Constant Quality (Q) |
| -a cq-level=Q | Definir o nível de quantização para cor e alfa como Q |
| -a color:cq-level=Q | Definir o nível de quantização para a cor como Q |
| -a alpha:cq-level=Q | Definir o nível de quantização para alfa como Q |
| -a tune=ssim | Ajustar para SSIM (o padrão é ajustar para PSNR) |
| --jobs J | Usar threads de worker J (padrão: 1) |
| --speed S | Definir a velocidade do codificador de 0 a 10 (mais lenta a mais rápida. Padrão: 6) |
A opção cq-level define o nível de quantização (0 a 63) para controlar a qualidade da cor ou do alfa.
Criar uma imagem AVIF com as configurações padrão
Os parâmetros mais básicos para a execução do avifenc são a configuração dos arquivos de entrada e saída.
./avifenc happy_dog.jpg happy_dog.avif
Recomendamos a seguinte linha de comando para codificar uma imagem, por exemplo, no nível de quantização 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
O Avifenc tem muitas opções que afetam a qualidade e a velocidade.
Se você quiser conferir as opções e saber mais sobre elas, basta executar ./avifenc
Agora você tem sua própria imagem AVIF.
Como acelerar o codificador
Um parâmetro que pode ser bom para mudar,
dependendo de quantos núcleos você tem na máquina, é o --jobs.
Esse parâmetro define quantas linhas de execução a avifenc vai usar para criar imagens AVIF.
Tente executar isso na linha de comando.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Isso informa ao avifenc para usar 8 linhas de execução ao criar a imagem AVIF, o que acelera a codificação AVIF em cerca de 5 vezes.
Efeitos na maior exibição de conteúdo (LCP)
As imagens são um candidato comum para a métrica Maior exibição de conteúdo (LCP). Uma recomendação comum para melhorar a velocidade de carregamento das imagens da LCP é garantir que elas sejam otimizadas. Ao reduzir o tamanho de transferência de um recurso, você melhora o tempo de carregamento do recurso, que é uma das quatro fases principais a serem abordadas ao lidar com candidatos de LCP que são imagens.
Recomendamos o uso de uma CDN de imagens ao otimizar imagens, porque é muito mais fácil do que configurar pipelines de otimização de imagens no processo de build do site ou usar manualmente binários de codificadores para otimizar imagens manualmente. No entanto, as CDNs de imagem podem ter um custo proibitivo para alguns projetos. Se esse for o caso, considere o seguinte ao otimizar com o codificador avifenc:
- Conheça as opções oferecidas pelo codificador. Você pode economizar mais e manter a qualidade de imagem suficiente testando alguns dos recursos de codificação disponíveis do AVIF.
- O AVIF oferece codificação com e sem perda. Dependendo do conteúdo de uma imagem, um tipo de codificação pode ter um desempenho melhor do que outro. Por exemplo, as fotos que normalmente são veiculadas como JPEGs provavelmente vão funcionar melhor com a codificação com perda, enquanto a codificação sem perda é provavelmente a melhor opção para imagens que contêm detalhes simples ou arte vetorial normalmente veiculadas como PNG.
- Se você estiver usando um bundler com suporte da comunidade para imagemin, use o pacote imagemin-avif para permitir que o bundler gere variantes de imagem AVIF.
Ao testar o AVIF, você pode melhorar os tempos de LCP do seu site nos casos em que o candidato ao LCP é uma imagem. Para mais informações sobre como otimizar o LCP, leia o guia sobre como otimizar o LCP.
Conclusão
Usando libaom, libavif e outras ferramentas de código aberto, é possível ter a melhor qualidade de imagem e desempenho para seu site usando o AVIF. O formato ainda é relativamente novo, e as otimizações e integrações de ferramentas estão sendo desenvolvidas ativamente. Se você tiver dúvidas, comentários ou solicitações de recursos, entre em contato com a lista de discussão av1-discuss, a comunidade do GitHub da AOM e a wiki do AVF.