Frequentemente, escrevemos sobre a sobrecarga de sites em imagens, e ferramentas como o Lighthouse destacam quando o carregamento de imagem tem um impacto negativo na experiência do usuário, como o aumento do tempo de carregamento ou a redução da 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, e uma nova opção para desenvolvedores da Web é o formato de imagem AVIF. Esta postagem do blog fala sobre atualizações recentes em 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 (em inglês). 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 temos economizado mais de 50% em comparação com o JPEG.
Além disso, o AVIF adiciona suporte a codec e contêiner para novos recursos de imagem, como High Dynamic Range e Wide Color Gamut, síntese de granulação de filme e decodificação progressiva.
O que há de novo
Desde o lançamento da compatibilidade com AVIF no Chrome M85, a compatibilidade com AVIF no ecossistema de código aberto melhorou em várias frentes.
Líbano
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 no Google e em outras empresas membros. Entre a versão libaom 2.0.0 (na mesma época em que o Chrome adicionou suporte ao AVIF) e a recente versão 3.1.0, houve otimizações significativas na codificação de imagens estáticas adicionadas à base de código. Confira a lista abaixo:
- Otimizações para multithreading e codificação em blocos.
- Uso de memória 5 vezes menor.
- Redução de 6,5x no uso da CPU, como mostra o gráfico abaixo.
Essas mudanças reduzem significativamente o custo de codificação do AVIF, principalmente as imagens carregadas com mais frequência ou com a prioridade mais alta do site. À medida que a codificação AV1 acelerada por hardware fica mais disponível em servidores e serviços na nuvem, o custo de criação de imagens AVIF continua diminuindo.
Libavif
O Libavif (link em inglês), a implementação de referência do AVIF, é um multiplexador e analisador AVIF de código aberto usado no Chrome para decodificar imagens AVIF. Ele também pode ser usado com libaom para criar imagens AVIF a partir de imagens descompactadas existentes ou transcodificação de imagens da Web existentes (JPEG, PNG etc.).
Recentemente, o Libavif adicionou compatibilidade com uma ampla variedade de configurações de codificadores, incluindo integração com configurações mais avançadas de codificadores do Libaom. Otimizações no pipeline de processamento, como a conversão rápida de YUV para RGB, usando o libyuv e o suporte a Alfa pré-multiplicado, acelera ainda mais o processo de decodificação. Por fim, o suporte ao modo de codificação all-intra recém-adicionado no libaom 3.1.0 traz todas as melhorias do libaom mencionadas acima.
Como codificar imagens AVIF com avifenc
Uma maneira rápida de testar o AVIF é o Squoosh.app. O Squoosh executa uma versão WebAssembly do libavif e expõe muitos dos mesmos recursos que as ferramentas de linha de comando. É uma maneira fácil de comparar o AVIF a outros formatos novos e antigos. Há também uma versão CLI do Squoosh destinada a apps Node.
No entanto, o WebAssembly ainda não tem acesso a todos os primitivos de desempenho das CPUs. Portanto, se você quiser executar o libavif o mais rápido possível, recomendamos o codificador de linha de comando, o avifenc.
Para entender como codificar imagens AVIF, apresentamos um tutorial usando a mesma imagem de origem usada no exemplo acima. Para começar, você vai precisar do seguinte:
Também será necessário 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 o codificador avifenc da linha de comando
1. Acessar o código
Confira a tag de lançamento de libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Mude o diretório para libavif
cd libavif
Há muitas maneiras diferentes de configurar avifenc e libavif para criação. Veja mais informações em libavif. Vamos criar o avifenc para que ele seja estaticamente vinculado à biblioteca de codificadores e decodificadores AV1, libaom.
3. Acessar e criar o libaom
Mude para o diretório de dependências externas libavif.
cd ext
O próximo comando vai extrair o código-fonte do libaom e compilá-lo estaticamente.
./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 do 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 o avifenc.
make
Você construiu um avifenc com sucesso!
Noções básicas sobre os parâmetros da linha de comando 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 da cor como 0 |
| --max 63 | Definir o quantizador máximo de cores 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 para o modo Qualidade constante (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 da cor como Q |
| -a alpha:cq-level=Q | Definir o nível de quantização de Alfa como Q |
| -a tune=ssim | Ajustar para SSIM (o padrão é ajustar para PSNR) |
| --jobs J | Usar linhas de execução de worker J (padrão: 1) |
| --velocidade S | Define a velocidade do codificador de 0 a 10 (mais lento mais rápido. 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 alfa.
Criar uma imagem AVIF com as configurações padrão
Os parâmetros mais básicos para executar o 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.
Para conferir as opções e saber mais sobre elas, execute ./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 parâmetro --jobs.
Esse parâmetro define quantas linhas de execução o avifenc usará para criar imagens AVIF.
Tente executar 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 instrui o avifenc a usar oito linhas de execução ao criar a imagem AVIF, o que acelera a codificação AVIF em aproximadamente cinco vezes.
Efeitos na Maior exibição de conteúdo (LCP, na sigla em inglês)
As imagens costumam ser candidatas à métrica Maior exibição de conteúdo (LCP). Uma recomendação comum para melhorar a velocidade de carregamento de imagens LCP é garantir que elas sejam otimizadas. Ao reduzir o tamanho da transferência de um recurso, você melhora o tempo de carregamento dele, que é uma das quatro fases principais a serem direcionadas ao lidar com candidatos a LCP que são imagens.
Usar uma CDN de imagem é altamente recomendado para otimizar imagens, porque exige muito menos esforço do que a configuração de pipelines de otimização de imagens no processo de criação do seu site ou do uso manual de binários do codificador para otimizar imagens manualmente. No entanto, as CDNs de imagem podem ter custos elevados para alguns projetos. Se esse for seu caso, considere o seguinte ao otimizar com o codificador avifenc:
- Conheça as opções oferecidas pelo codificador. Você pode encontrar economias adicionais mantendo uma qualidade de imagem suficiente ao experimentar alguns dos recursos de codificação disponíveis do AVIF.
- O AVIF fornece 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, para fotografias que normalmente são exibidas como JPEGs, provavelmente terão melhor desempenho com codificação com perdas, enquanto a codificação sem perda provavelmente será melhor para imagens que contêm detalhes simples ou linhas de arte normalmente exibidas como PNG.
- Se você usar um bundler com suporte da comunidade para imagemin, use o pacote imagemin-avif para permitir que ele 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 à LCP é uma imagem. Para mais informações sobre como otimizar a LCP, leia o guia sobre como otimizar a LCP.
Conclusão
Com o libaom, o libavif e outras ferramentas de código aberto, é possível ter a melhor qualidade e desempenho de imagem 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 solicitar recursos, entre em contato na lista de e-mails av1-discuss, comunidade AOM no GitHub e wiki do AVIF (links em inglês).