Nós escrevemos com frequência sobre a sobrecarga de sites a partir de imagens, e ferramentas como o Lighthouse destacam quando o carregamento da imagem está tendo um impacto negativo na experiência do usuário, como aumentar o tempo de carregamento ou diminuir a 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 Web é o formato de imagem AVIF (link em inglês). 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 de uso dessas bibliotecas para codificar imagens AVIF de forma eficiente.
AVIF é um formato de imagem baseado no codec de vídeo AV1 e padronizado pela Alliance for Open Media (link em inglês). 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 tiveram uma economia superior a 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 and Wide Color Gamut, síntese de granulação e decodificação progressiva.
O que há de novo
Desde o lançamento da compatibilidade com AVIF no Chrome M85, o suporte a esse recurso no ecossistema de código aberto melhorou em vários aspectos.
Libaom
O Libaom é um codificador e decodificador AV1 de código aberto mantido pelas empresas da Alliance for Open Media, usado em muitos serviços de produção no Google e em outras empresas-membros. Entre a versão 2.0.0 do libaom, na mesma época em que o Chrome adicionou suporte para AVIF e a recente versão 3.1.0, houve otimizações significativas de codificação de imagens estáticas foram adicionadas à base de código. Por exemplo:
- Otimizações para multithreading e codificação lado a lado.
- Redução de 5x no uso de memória.
- Redução de 6,5x no uso da CPU, conforme mostrado no gráfico abaixo.
Essas mudanças reduzem bastante o custo de codificação do AVIF, especialmente as imagens carregadas com mais frequência ou de maior prioridade no site. À medida que a codificação acelerada por hardware do AV1 for disponibilizada em servidores e serviços de nuvem, o custo de criação de imagens AVIF vai continuar caindo.
Libavif
O Libavif, a implementação de referência do AVIF, é um muxer e analisador de código aberto usado no Chrome para decodificar imagens AVIF. Ele também pode ser usado com o libaom para criar imagens AVIF a partir de imagens não compactadas existentes ou para transcodificar de imagens existentes da Web (JPEG, PNG, etc).
Recentemente, o Libavif adicionou suporte a uma variedade maior de configurações de codificador, incluindo integração com configurações mais avançadas do codificador libaom. Otimizações no pipeline de processamento, como a conversão rápida de YUV para RGB usando o libyuv e o suporte alfa pré-multiplicado, aceleram ainda mais o processo de decodificação. E, por fim, o suporte para o modo de codificação all-intra recém-adicionado no libaom 3.1.0 oferece 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 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 todos os primitivos de desempenho das CPUs. Portanto, se você quiser executar o libavif da forma mais rápida, recomendamos o codificador de linha de comando, avifenc.
Para entender como codificar imagens AVIF, apresentaremos um tutorial usando a mesma imagem de origem usada no exemplo acima. Para começar, você vai precisar do seguinte:
Você também 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 o codificador de linha de comando avifenc
1. Acessar o código
Confira uma 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 o avifenc e o libavif para compilação. Saiba mais 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 libavif.
cd ext
O próximo comando vai extrair o código-fonte e criar a biblioteca 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 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 avifenc.
make
Você criou avifenc com sucesso!
Noções básicas sobre os parâmetros de 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 de cor como 0 |
| --max 63 | Definir o quantizador máximo de cor como 63 |
| --minalpha 0 | Definir o quantizador mínimo da versão Alfa como 0 |
| --maxalpha 63 | Definir o quantizador máximo da versão Alfa como 63 |
| -a-uso-final=q | Defina 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 alfa: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 do J worker (padrão: 1) |
| --speed S | Defina a velocidade do codificador de 0 a 10 (mais lento, mais rápido, por padrão: 6) |
A opção cq-level define o nível de quantização (0-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 linha de comando a seguir 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
A 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 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 cerca de cinco 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 de imagens LCP é garantir que uma imagem seja otimizada. 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.
Usar uma CDN de imagem é altamente recomendado ao otimizar imagens, porque requer muito menos esforço do que configurar pipelines de otimização de imagens no processo de criação do seu site ou manualmente usando binários do codificador 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 da imagem, um tipo de codificação pode ter um desempenho melhor que outro. Por exemplo, fotografias que normalmente são exibidas como JPEGs provavelmente terão melhor desempenho com codificação com perda, enquanto a codificação sem perda provavelmente é melhor para imagens que contêm detalhes simples ou arte de linha normalmente servidas 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 a LCP, leia o guia sobre como otimizar a LCP.
Conclusão
Com libaom, libavif e outras ferramentas de código aberto, você consegue a melhor qualidade e desempenho de imagem para seu site usando o AVIF. O formato ainda é relativamente novo, e 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 e-mails av1-discuss, comunidade do AOM no GitHub e wiki do AVIF (links em inglês).