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?
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.
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.
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";
doneE aqui fica uma nova tabela de resultados:
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.
Estas são as minhas primeiras impressões deste novo formato. E tu, que dizes? Vais implementá-lo nos teus projetos web?
