Veiculação de imagens AVIF

1. Introdução

As imagens representam mais de 60% dos bytes necessários para carregar uma página da Web. Usando o AVIF, você pode diminuir suas imagens e fazer com que o seu site carregue mais rápido.

O que é AVIF?

O AVIF é um novo formato de imagem derivado do bitream de vídeo AV1. O AVIF foi criado para ter eficiência de compactação.

Por que usar o AVIF?

As imagens AVIF são muito menores do que as imagens JPEG, PNG, GIF ou WebP com qualidade igual ou melhor.

O que você vai aprender

• Como criar imagens AVIF com suas imagens
• Como renderizar imagens AVIF em uma página da Web

O que é necessário

• Chrome 85 ou mais recente
• Um editor de texto
• cmake
• git
• ninja (link em inglês)
• Uma imagem. Enviei uma aqui
• FFmpeg

2. Como criar imagens AVIF com o Squoosh

O Squoosh é um app da Web de compactação de imagens. Com o Squoosh, você pode compactar facilmente suas imagens em imagens AVIF.

1. Abra https://squoosh.app
2. Solte uma imagem local no Squoosh.

3. Escolha AVIF na caixa suspensa Compactar.

O Squoosh compacta a imagem em uma imagem AVIF. Quando o Squoosh terminar, será exibido um botão de download com algumas estatísticas da imagem AVIF no canto inferior direito.

A imagem de exemplo original tinha 3.340 KB, e a imagem compactada tem 378 KB. A imagem de exemplo foi compactada quase 10 vezes menor do que a imagem original.

4. Baixe a imagem AVIF

Clique no botão de download e a imagem AVIF será salva em sua unidade local.

Você pode visualizar sua imagem AVIF arrastando-a para o Google Chrome.

Agora você tem sua própria imagem AVIF!

3. Como criar o codificador de linha de comando avifenc

O avifenc é um aplicativo de linha de comando que pode converter imagens PNG e JPEG em imagens AVIF. O avifenc usa o libavif, que é uma biblioteca que pode decodificar e codificar imagens AVIF. Se você tiver muitas imagens que deseja converter para AVIF, o uso do codificador de linha de comando, avifenc, é provavelmente uma boa escolha.

O Chrome usa o libavif para renderizar imagens AVIF.

1. Acesse o código.

git clone 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. Adquira e crie o libaom.

Mude para o diretório de extensões libavif.

cd ext

O comando a seguir extrairá o código-fonte do libaom e criará o libaom estaticamente.

./aom.cmd

Mude o diretório para libavif.

cd ../

4. Crie 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Crie avifenc.

make

Você criou avifenc com sucesso!

4. Como criar imagens AVIF com avifenc

1. 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 example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a nitidez=3 -y 420" são configurações recomendadas para imagens 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 segunda imagem AVIF!

2. Acelerando 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 esta linha de comando.

./avifenc happy_dog.jpg example.avif --jobs 8

Isso diz ao avifenc para usar oito segmentos ao criar a imagem AVIF. Na minha máquina, isso acelera a codificação AVIF em cinco vezes.

5. Renderize imagens AVIF em uma página da Web.

Agora vamos mostrar ao mundo todo o seu trabalho duro.

1. Crie uma página web para exibir a sua imagem AVIF.

Crie um arquivo chamado avif_example.html.

Abra avif_example.html no seu editor de texto e digite este código:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Copie seu arquivo de origem (no meu caso, happy_dog.jpg) e seu arquivo AVIF (eaxmple.avif) para o mesmo diretório que avif_example.html.

Estamos usando o elemento para renderizar a imagem AVIF se o navegador for compatível com esse formato, com um substituto para JPEG se o navegador não for. Saiba mais sobre aqui.

2. Abrir página da Web no Chrome.

Uma maneira de abrir o arquivo HTML é arrastar avif_example.html para o Chrome. Outra opção para abrir o arquivo html é disponibilizar avif_example.html de um servidor HTTP.

Agora sua imagem AVIF deve ser renderizada no Chrome. Teste isso clicando com o botão direito do mouse na imagem e escolhendo Save image as.... Isso abrirá uma caixa de diálogo com example.avif. Outra opção é abrir as Ferramentas para desenvolvedores do Chrome e verificar se o download de example.avif foi concluído.

6. Como criar imagens AVIF animadas

1. Converta a mídia de origem para o formato y4m.

avifenc suporta y4m como entrada para criar imagens AVIF animadas. Uma ótima opção para criar arquivos y4m é usar o FFmpeg.

Os arquivos Y4m não são compactados, então podem ser muito grandes.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Crie uma imagem AVIF animada.

Criei um arquivo y4m para você usar caso não tenha um arquivo de mídia de origem: ice_qcif_15fps.y4m. O arquivo é da Xiph.org Video Test Media (link em inglês).

Execute este comando para criar uma imagem AVIF animada a partir de um arquivo y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Agora você tem sua própria imagem AVIF animada!

3. Renderize a imagem AVIF animada em uma página da web.

Crie um arquivo chamado avif_animated_example.html.

Criei um arquivo GIF para você usar caso não tivesse um arquivo de mídia de origem: ice_qcif_15fps.gif.

Observe que o arquivo gif é aproximadamente 35 vezes maior e de qualidade muito pior.

Abra avif_animated_example.html no seu editor de texto e digite este código:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Copie o arquivo de origem (no caso acima ice_qcif_15fps.gif) e o arquivo AVIF (animated.avif) para o mesmo diretório que avif_animated_example.html.

4. Abrir página da Web no Chrome.

Uma maneira de abrir o arquivo HTML é arrastar avif_animated_example.html para o Chrome. Outra opção para abrir o arquivo html é disponibilizar avif_animated_example.html de um servidor HTTP.

Agora sua imagem AVIF animada será renderizada no Chrome.

Se estiver usando a mídia de amostra fornecida, o resultado será semelhante a este:

Exceto com o AVIF animado, uma qualidade muito melhor.

Você pode testar se é uma imagem AVIF animada clicando com o botão direito do mouse na imagem e escolhendo Save image as..., o que abrirá uma caixa de diálogo com animated.avif. Outra opção é abrir as Ferramentas para desenvolvedores do Chrome e verificar se o download de animated.avif foi concluído.

7. Parabéns!

Você concluiu o laboratório de códigos de exibição de imagens AVIF.

Esperamos que esteja claro para você como o AVIF pode ajudar a tornar suas imagens menores e mais eficientes para transmissão na web. Saiba mais sobre as características do AVIF em uma ótima postagem de Jake Archibald.