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. Com o AVIF, é possível reduzir o tamanho das imagens e acelerar o carregamento do site.

O que é AVIF?

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

Por que AVIF?

As imagens AVIF são muito menores do que as imagens JPEG, PNG, GIF ou WebP com a mesma qualidade 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

2. Como criar imagens AVIF com o Squoosh

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

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

Captura de tela do Squoosh

  1. Escolha AVIF na caixa suspensa "Compactar".

Menu suspenso do Squoosh

Em seguida, o Squoosh vai compactar a imagem para o formato AVIF. Quando o Squoosh terminar, ele vai mostrar um botão de download com algumas estatísticas sobre a imagem AVIF no canto inferior direito.

Botão de download do Squoosh

A imagem de amostra original tinha 3340 kB, e a compactada tem 378 kB. A imagem de exemplo foi compactada e ficou quase 10 vezes menor que a original.

  1. Baixar a imagem AVIF

Clique no botão de download para salvar a imagem AVIF no seu drive local.

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. Ele usa o libavif, uma biblioteca que pode decodificar e codificar imagens AVIF. Se você tiver muitas imagens que quer converter para AVIF, usar o codificador de linha de comando, avifenc, provavelmente é uma boa opção.

  1. Acesse o código.
git clone https://github.com/AOMediaCodec/libavif.git
  1. Mude o diretório para libavif.
cd libavif/

Há muitas maneiras diferentes de configurar o avifenc e o libavif para criar. Saiba mais em libavif. Vamos criar o avifenc para que ele seja vinculado estaticamente ao codificador libaom, ao decodificador dav1d e às bibliotecas de processamento libyuv.

  1. Crie a ferramenta de codificação de linha de comando, avifenc.

É recomendável 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 -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Crie o avifenc.

make

Você criou o avifenc.

4. Como criar imagens AVIF com o avifenc

  1. Crie uma imagem AVIF com as configurações padrão.

Os parâmetros mais básicos para a execução do avifenc são a definição dos arquivos de entrada e saída.

./avifenc happy_dog.jpg example.avif

Agora você tem sua segunda imagem AVIF!

  1. Mudar a qualidade da codificação AVIF.

Normalmente, o único parâmetro que você pode querer mudar na codificação AVIF é o quality. quality é um parâmetro que troca a qualidade de uma imagem compactada pelo tamanho do arquivo. Por exemplo, um arquivo de alta qualidade (-q 90) é muito maior do que um de baixa qualidade (-q 20), mas a qualidade da imagem é muito melhor.

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

Agora vamos mostrar ao mundo todo o seu trabalho.

  1. Crie uma página da Web para disponibilizar a imagem AVIF.

Crie um arquivo chamado avif_example.html.

Abra avif_example.html no 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 o arquivo de origem (no meu caso, happy_dog.jpg) e o arquivo AVIF (eaxmple.avif) para o mesmo diretório de avif_example.html.

Estamos usando o elemento picture para renderizar a imagem AVIF se o navegador for compatível com esse formato. Caso contrário, o formato JPEG será usado. Saiba mais sobre o elemento picture aqui.

  1. Abra a 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 é veicular avif_example.html de um servidor HTTP.

Agora a imagem AVIF será renderizada no Chrome. Para testar, clique com o botão direito do mouse na imagem e escolha Save image as.... Isso vai abrir uma caixa de diálogo com example.avif. Outra opção é abrir as Ferramentas para desenvolvedores do Chrome e verificar se example.avif foi baixado.

6. Como criar imagens AVIF animadas com o FFmpeg

  1. Crie uma imagem AVIF animada.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

  1. Renderizar a imagem AVIF animada em uma página da Web.

Crie um arquivo chamado avif_animated_example.html.

Abra avif_animated_example.html no 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 de avif_animated_example.html.

  1. Abra a 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 é veicular avif_animated_example.html de um servidor HTTP.

Agora, a imagem AVIF animada será renderizada no Chrome.

Se você estiver usando a mídia de exemplo fornecida, ela vai ficar mais ou menos assim:

Pista de gelo animada

Para testar se é uma imagem AVIF animada, clique com o botão direito do mouse na imagem e escolha Save image as.... Isso vai abrir uma caixa de diálogo com animated.avif. Outra opção é abrir as Ferramentas para desenvolvedores do Chrome e verificar se animated.avif foi baixado.

7. Como criar imagens AVIF animadas com avifenc

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. Crie uma imagem AVIF animada.

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

./avifenc ice_qcif_15fps.y4m animated.avif

Agora você tem sua segunda imagem AVIF animada!

  1. Renderizar a imagem AVIF animada em uma página da Web.

Crie um arquivo chamado avif_animated_example.html.

Abra avif_animated_example.html no 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 de avif_animated_example.html.

  1. Abra a 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 é veicular avif_animated_example.html de um servidor HTTP.

Agora, a imagem AVIF animada será renderizada no Chrome.

Se você estiver usando a mídia de exemplo fornecida, ela vai aparecer assim:

Pista de gelo animada

Para testar se é uma imagem AVIF animada, clique com o botão direito do mouse na imagem e escolha Save image as.... Isso vai abrir uma caixa de diálogo com animated.avif. Outra opção é abrir as Ferramentas para desenvolvedores do Chrome e verificar se animated.avif foi baixado.

  1. Mudar a qualidade da codificação AVIF.

O arquivo ice_qcif_15fps.gif é cerca de sete vezes maior e tem uma qualidade muito pior. Para mudar a qualidade do AVIF e corresponder à do ice_qcif_15fps.gif, altere o parâmetro de qualidade para 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Agora, o arquivo AVIF animado e ice_qcif_15fps.gif têm aproximadamente a mesma qualidade, mas o arquivo GIF é cerca de 22 vezes maior.

8. Parabéns!

Você concluiu o laboratório de código "Como veicular imagens AVIF".

Esperamos que tenha ficado claro como o AVIF pode ajudar a reduzir o tamanho das imagens e torná-las mais eficientes para transmissão na Web. Saiba mais sobre os recursos do AVIF em uma ótima postagem (link em inglês) de Jake Archibald.