1. Introdução
As imagens representam mais de 60% dos bytes necessários para carregar uma página da Web. Com o AVIF, você pode reduzir o tamanho das imagens e acelerar o carregamento do site.
O que é AVIF?
O AVIF é um formato de imagem derivado do bitstream de vídeo AV1. Ele foi criado para oferecer 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 a mesma qualidade ou melhor.
O que você vai aprender
- Como criar imagens AVIF
- 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 suas imagens em AVIF.
- Abra https://squoosh.app
- Solte uma imagem local no Squoosh.
- Escolha AVIF na caixa suspensa "Compress".
O Squoosh vai compactar a imagem em AVIF. Quando terminar, ele vai mostrar um botão de download com algumas estatísticas sobre a imagem AVIF no canto inferior direito.
A imagem de amostra original tinha 3.340 kB, e a imagem compactada tem 378 kB. A imagem de amostra foi compactada quase 10 vezes menor do que a original.
- Faça o download da imagem AVIF
Clique no botão de download, e a imagem AVIF será salva na unidade 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 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 é uma boa opção.
- Acesse o código.
git clone https://github.com/AOMediaCodec/libavif.git
- 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.
- 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 o 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
- Crie uma imagem AVIF com as configurações padrão.
Os parâmetros mais básicos para o avifenc são a configuração dos arquivos de entrada e saída.
./avifenc happy_dog.jpg example.avif
Agora você tem sua segunda imagem AVIF.
- Como mudar a qualidade da codificação AVIF.
Normalmente, o único parâmetro que você pode querer mudar na codificação AVIF é o parâmetro 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) será muito maior do que um arquivo de baixa qualidade (-q 20), mas o arquivo de alta qualidade terá uma aparência muito melhor.
5. Renderizar imagens AVIF em uma página da Web.
Agora vamos mostrar ao mundo todo o seu trabalho.
- Crie uma página da Web para veicular sua 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 ela, com um substituto JPEG se o navegador não for. Saiba mais sobre o picture elemento aqui.
- 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 é 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..., que vai abrir uma caixa de diálogo com example.avif. Outra opção é abrir as Ferramentas para Desenvolvedores do Chrome e conferir se example.avif foi baixado.
6. Como criar imagens AVIF animadas com o FFmpeg
- Crie uma imagem AVIF animada.
Execute este comando para criar uma imagem AVIF animada a partir de um arquivo y4m.
ffmpeg -i ice_qcif_15fps.y4m animated.avif
Agora você tem sua própria imagem AVIF animada.
- Renderize 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.
- 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 é veicular avif_animated_example.html de um servidor HTTP.
Agora a imagem AVIF animada será renderizada no Chrome.
Se você usar a mídia de amostra fornecida, ela terá uma aparência semelhante a esta:
Para testar se é uma imagem AVIF animada, clique com o botão direito do mouse na imagem e escolha Save image as..., que vai abrir uma caixa de diálogo com animated.avif. Outra opção é abrir as Ferramentas para Desenvolvedores do Chrome e conferir se animated.avif foi baixado.
7. Como criar imagens AVIF animadas com o avifenc
- Converta a mídia de origem para o formato y4m.
avifenc oferece suporte ao 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
- Crie uma imagem AVIF animada.
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 segunda imagem AVIF animada.
- Renderize 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.
- 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 é veicular avif_animated_example.html de um servidor HTTP.
Agora a imagem AVIF animada será renderizada no Chrome.
Se você usar a mídia de amostra fornecida, ela terá uma aparência semelhante a esta:
Para testar se é uma imagem AVIF animada, clique com o botão direito do mouse na imagem e escolha Save image as..., que vai abrir uma caixa de diálogo com animated.avif. Outra opção é abrir as Ferramentas para Desenvolvedores do Chrome e conferir se animated.avif foi baixado.
- Como mudar a qualidade da codificação AVIF.
O arquivo ice_qcif_15fps.gif é cerca de 7 vezes maior e tem uma qualidade muito pior. Você pode mudar a qualidade do AVIF para corresponder aproximadamente à qualidade do ice_qcif_15fps.gif mudando 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 codelab de veiculação de imagens AVIF.
Esperamos que agora você entenda como o AVIF pode ajudar a reduzir o tamanho das imagens e torná-las mais eficientes para transmissão pela Web. Saiba mais sobre os recursos do AVIF em uma ótima postagem de Jake Archibald.