AVIF – O novo formato de imagens para a Web

AVIF - O novo formato de imagens para a Web

AVIF – O novo formato de imagens para a Web

AVIF – O novo formato de imagens para a Web 1240 700 Bruno Brito

O AV1 Image File Format, mais conhecido por AVIF, atingiu versão 1.0 em fevereiro de 2019 e, em agosto de 2020, está pronto para chegar aos browsers, começando pelo Chrome 85 e o Firefox 80. É já no final deste mês! 😎

O AVIF é, essencialmente, um novo formato de imagens que aposta forte na compressão e que foi já adotado por gigantes tecnológicos como a Netflix, que considera o formato superior ao JPEG, PNG e até ao WebP.

Marcas como o Facebook ou o YouTube também já manifestaram interesse em utilizar este formato na web. O próprio site “Can I use…” menciona que o formato AVIF deverá substituir o WebP, que após todos estes anos, ainda não alcançou o suporte total.

Em julho de 2020, de acordo com o httparchive, cada página apresentada tem 1 MB de imagens. Não seria bom se conseguíssemos baixar esse valor para metade, sem perda visível de qualidade?

O peso das imagens numa página Web

Essa é a grande promessa deste novo formato, mas não é a única. O AVIF cumpre alguns dos principais requisitos para a web moderna:

  • suporta HDR;
  • consegue armazenar vários frames animados (como os GIFs);
  • suporta o canal alfa, ou seja, podes usar fundos transparentes, tal como num ficheiro PNG;
  • é open-source (ao contrário do JPEG XR, outro formato promissor mas que requer a aquisição de uma licença).

O grande destaque vai, no entando, para a grande redução no tamanho das imagens. Já começam a surgir vários testes exaustivos, como este, e os resultados são promissores: ficheiros 50% mais pequenos que JPG, ou 30% face ao WebP.

Mas será mesmo assim? Curioso quanto a isto, decidi fazer eu próprio alguns testes.

JPG/PNG versus WebP versus AVIF – os meus testes

Comecei por descarregar 3 imagens aleatórias do Unsplash:

Aproveitei também para ver que tipo de ganhos obteria com um sortido de imagens que tenho já publicadas na web, tanto JPGs como PNGs.

Todas estas imagens foram primeiro optimizadas pelo ImageOptim, um programa que utilizo sempre para reduzir qualquer imagem que insiro na web e que menciono no final desta lista. Assim, já estamos a falar de JPGs e PNGs mais reduzidos, à partida para este teste.

Comecei por abrir o terminal para converter cada um dos ficheiros originais para WebP com o cwebp, correndo o seguinte comando (adaptando-o depois para os PNGs):

for file in *.jpg ; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Como podes ver, para a definição de qualidade, escolhi o valor 80, tal como no exemplo oficial.

Para instalar o conversor AVIF, como estou no macOS, usei o Homebrew, que apresento neste artigo. Bastou-me correr brew install joedrago/repo/avifenc e ficou instalado! 👍

De seguida, adaptei o loop do comando anterior, para utilizar desta vez o avifenc (repara que, inicialmente, optei por não definir nenhum parâmetro adicional, ou seja, seria uma imagem AVIF na máxima qualidade):

for file in *.jpg ; do avifenc "$file" "${file%.jpg}.avif"; done

Se quiseres evitar comandos do terminal, podes tentar utilizar esta versão online do Squoosh como alternativa, já com suporte para o AVIF. Nos meus testes, nem sempre funcionou, especialmente quando inseria imagens pesadas 😬

Squoosh para conversão para AVIF

Na minha experiência, a conversão para AVIF foi consideravelmente mais lenta do que para WebP (8–10 segundos por imagem). Não é muito preocupante se apenas tiveres algumas imagens para converter, mas poderá ser um problema se quiseres converter várias centenas ou milhares. É algo a ter em conta.

Também é provável que não tenhas programas de imagem instalados que suportem este formato. Tentei abrir as imagens com o Pixelmator e com o Affinity Designer e não tive sorte.

O QuickLook do macOS também não reconhecia as imagens geradas, mas isso ficou resolvido quando instalei este plugin. Agora sim, já conseguia ver as imagens sem precisar de as abrir num browser compatível… mas já lá vamos.

Os resultados

Após todas as conversões (e ainda sem olhar para a qualidade das imagens), verifiquei que o WebP venceu em praticamente todos os testes.

Tabela de resultados de testes AVIF - 1

Então o WebP ganhou, certo? É esse que devo usar?

Calma. Talvez não tenha sido justo – o WebP tinha um parâmetro de qualidade definido para 80, mas o AVIF não.

Posto isto, decidi repetir as conversões, desta vez definindo 3 tipos de qualidade: 16, 32 e 63 (63 é o valor máximo – quanto mais perto de 0, melhor será a qualidade da imagem).

Ajustei então o loop:

for file in *.png ; 
do avifenc --max 16 "$file" "${file%.png}-16.avif";
avifenc --max 32 "$file" "${file%.png}-32.avif";
avifenc --max 63 "$file" "${file%.png}-63.avif";
done

E aqui fica uma nova tabela de resultados:

Tabela de resultados de testes AVIF - 2

Sem surpresa, quanto maior a compressão, mais reduzido ficou o ficheiro – mas a redução não é substancial, passando de 32 para 63. O WebP foi habitualmente superado a partir do valor 32 do AVIF, que me parece um bom ponto de partida para converter as fotos.

Fica a faltar o derradeiro teste – abrir essas 2 ficheiros e comparar essas fotos com os nossos olhos.

Criei um ZIP com todas as imagens (35 MB), para que possas compará-las à vontade.

Neste tipo de testes, é normal termos que avaliar caso a caso. Com poucas cores, não são perceptíveis diferenças (e quando é assim, a meu ver ganha o ficheiro mais reduzido). Se estivermos a olhar para imagens com um grande número de cores, ou com gradientes, vai ser perceptível a diferença face ao ficheiro original.

O que se conclui?

Este formato, tal como o WebP, é realmente vantajoso face ao JPG ou PNG – a imagem não perde qualidade de forma significativa e apresenta ficheiros bem mais reduzidos.

Mas para os ganhos serem ideais, terás que testar cada imagem, ou ter um conjunto de valores já definidos que funcionem bem na maioria dos casos (por exemplo, um valor para screenshots, que habitualmente têm poucas cores, e outro valor para fotografias de paisagens ou pessoas).

Para as fotografias do Unsplash, o WebP pareceu-me apresentar o melhor compromisso qualidade da foto/dimensão do ficheiro. Para capturas de ecrã, ou imagens de destaque com poucas cores, o AVIF pareceu-me a melhor aposta, até numa definição agressiva.

Não ficarás mal servido com nenhum dos 2. Mas aqui entra a questão do suporte, e o AVIF parece ter um futuro mais promissor nesse aspeto.

Implementando o formato AVIF num site

Se decidiste converter todas as imagens do teu site e disponibilizar este formato, como ainda não está disponível nos browsers, e o seu suporte será gradual, o melhor que tens a fazer será utilizar o elemento nativo de HTML <picture>, oferecendo este formato apenas se o browser o suportar.

Assim, o código deverá ser algo deste tipo:

<picture>
    <source srcset="img/foto.avif" type="image/avif">
    <source srcset="img/foto.webp" type="image/webp">
    <img src="img/foto.jpg" alt="Descrição da Fotografia">
</picture>

Deves cumprir esta ordem, para que o browser tente apresentar primeiro o ficheiro AVIF, depois o WebP, e só depois o ficheiro JPG.

Podes testar este novo formato de imagens hoje, recorrendo ao Chrome Canary, que está sempre mais avançado que a versão do Chrome normal, ou ao Firefox Developer Edition, ativando essa opção indo a about: config e passando a definição image.avif.enabled para true.

Como ativar o formato AVIF no Firefox


Estas são as minhas primeiras impressões deste novo formato. E tu, que dizes? Vais implementá-lo nos teus projetos web?

    Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

    NOTA: Todos os campos são de preenchimento obrigatório.

    AVIF – O novo formato de imagens para a Web

    Tempo de Leitura: 6 min
    0