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 das ferramentas de código aberto para AVIF, apresenta as bibliotecas de codificação libaom e libavif e inclui um tutorial de uso dessas bibliotecas para codificar imagens AVIF de forma 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 compressã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 visto 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 multitarefas 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 com aceleração de 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 testar o AVIF é o Squoosh.app. O Squoosh executa uma versão 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 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 o avifenc e o libavif para compilação. Confira mais informações em libavif. Vamos criar o avifenc para que ele seja vinculado estaticamente à biblioteca de codificador e decodificador AV1, libaom.
3. Faça o download e crie 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 da libaom e criar a 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
É uma boa ideia criar um diretório de build para o 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 a 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 | Defina 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.
Crie uma imagem AVIF com 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.
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 mudar dependendo de quantos núcleos você tem na máquina é o parâmetro --jobs.
Este parâmetro define quantos encadeamentos o avifenc 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 Largest Contentful Paint (LCP)
As imagens são candidatas comuns à métrica Maior exibição de conteúdo (LCP). Uma recomendação comum para melhorar a velocidade de carregamento das imagens LCP é garantir que elas sejam otimizadas. Ao reduzir o tamanho de transferência de um recurso, você melhora o tempo de carregamento dele, que é uma das quatro fases principais (link em inglês) a serem direcionadas ao lidar com candidatos à LCP que são imagens.
Recomendamos o uso de uma CDN de imagens ao otimizar imagens, porque isso exige muito menos esforço 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 seu caso, considere o seguinte ao otimizar com o codificador avifenc:
- Conheça as opções oferecidas pelo codificador. Você pode encontrar economias adicionais enquanto mantém qualidade de imagem suficiente, experimentando 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, 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 estiver usando um bundler com suporte da comunidade para imagemin, considere usar o pacote imagemin-avif para permitir que seu bundler gere variantes de imagem AVIF.
Ao testar o AVIF, você poderá perceber uma melhoria nos tempos de LCP do seu site nos casos em que o candidato à LCP for 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 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 na lista de discussão av1-discuss, comunidade do GitHub da AOM e wiki do AIFF.