Pare de usar PNG e JPG e comece hoje com AVIF

Nesse artigo você vai descobrir sobre um novo formato de imagem chamado AVIF, que é muito mais leve sem perder qualidade, tornando assim a sua aplicação muito mais rápida de se baixar e melhorando a performance da sua aplicação.

Primeiro de tudo, o que é AVIF? É de comer? De acordo com o Caniuse:

“A modern image format based on the AV1 video format. AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them. AVIF competes with JPEG XL which has similar compression quality and is generally seen as more feature-rich than AVIF”.

Ou seja, AVIF é um novo formato de imagem baseado no codec de vídeo AV1. O que chama atenção nesse formato é que ele compacta uma imagem muito melhor que outros como WebP, JPEG ou PNG. Por mais que o AVIF tenha uma certa competição com o formato JPEG XL, o sistema de vetorização e curvas fazem com que a compressão não perca muita qualidade quando comprimida.

Uma simples comparação seria:

Veja que, por mais que o formato .webp tenha sido amplamente usado na web, o novo formato AVIF comprime mais e por isso é o mais recomendado nos dias de hoje para uma aplicação web.

Dentre as principais razões eu destaco:

● Melhoria na performance do seu website (visto que as imagens vão carregar mais rápido).
● Uso de menos banda de internet e por consequência menos energia elétrica (salvando a bateria do celular da pessoa que vai carregar o seu site por exemplo).
● E, claro, melhoria na experiência do usuário =).

Como converter uma imagem em AVIF?

As ferramentas mais famosas e preparadas no mercado hoje estão entre a avif.io e o Squoosh (feito pelo Google).

Eu recomendo fortemente o uso do Squoosh - inclusive como ferramenta de aprendizado - pois você pode ir alterando os valores da compressão e ver como eles se comportam com a sua imagem. A configuração padrão do Squoosh para AVIF já é muito poderosa, veja um exemplo com esse lindo computador em JPG:

Essa imagem do computador tem JPG tem 47,9 KB. Se mandamos ela para o Squoosh, ele vai nos mostrar a comparação entre os dois formatos:

Com a configuração padrão você já pode notar uma diferença de 75% no tamanho, reduzindo para 12,2 KB. Se reduzíssemos o tamanho da imagem pela metade (ao invés de alterar diretamente no site através do CSS), ela chegaria a 5,01KB (90% a menos da imagem original):

Compatibilidade com os Browsers

A lista mais atualizada e completa dos browsers pode ser encontrada no Caniuse. Até a escrita desse artigo, os principais browsers já têm suporte para o novo formato AVIF:

Entretanto, mesmo que um browser ainda não possua compatibilidade com o AVIF, você pode usar duas técnicas diferentes para que o seu site funcione mesmo sem o browser estar preparado: com um polyfill ou usando um fallback com a tag <picture>.

Utilizando a tag <picture>

Para começar, você pode usar uma técnica do browser chamada Content Negotiation, que vai baixar a imagem com o formato certo dependendo do suporte que que o browser tem. Por exemplo:

Nesse exemplo, antes de fazer o download, a tag <picture> vai validar o suporte no browser e só então baixar a imagem com o formato correto. Você pode definir vários formatos, o perfeito para uma aplicação seria ter o Avif, o WebP e só então o JPG:

Só lembrando que a tag picture é uma tag lógica e só está ali para criar os fallbacks. Se for necessário aplicar algum CSS para estilizar a imagem na sua aplicação, esse CSS deve ser aplicado direto na tag IMG, pois a picture não vai participar do DOM na hora de renderizar.

Utilizando um Polyfill

Essa técnica, mesmo sendo menos recomendada (pois vai adicionar uma dependência no seu projeto), é muito fácil de aplicar e não vai demandar nenhuma mudança no código da sua aplicação.

Como funciona na prática? Ao adicionar um arquivo chamado avif.js para ser executado na inicialização da sua aplicação, a capacidade de interpretar esse tipo de imagem vai ser criado. Uma ressalva: o Polyfill para AVIF não funciona em abas privadas e em versões antigas dos browsers Firefox (53+) e Edge (17+).

É recomendado utilizar as duas técnicas em conjunto: Criar o suporte para AVIF com o Polyfill e usar a tag <picture>. Caso o usuário abrir em uma aba privada, o fallback vai ser usado. Para ver todas as versões compatíveis e como instalar o Polyfill, veja na documentação no GitHub.

Mais algumas funcionalidades do AVIF

Assim como o PNG aceita imagens com transparência e os GIF aceitam micro animações, os arquivos AVIF também têm funcionalidades interessantes (além da sua incrível compactação).

⮚ Suporte de animações: imagens de multicamada e com sequência de imagens são aceitas (tal como GIF).

⮚ Elementos gráficos: O modo como o AVIF vetoriza a imagem faz com que ela não fica “pixelada” ao comprimir, como no JPG por exemplo.

⮚ Suporte HDR: O AVIF tem suporte para paleta de 12 bits de cores, o que deixa disponível para ser usado em imagens HDR e WCG (Wide color gramut, usado especialmente em TVs).

⮚ Suporte a transparência: assim como o PNG aceita transparência, imagens monocromáticas e imagens multicanal (muito utilizada no meio científico para imagens de microscópio e telescópio).

Mais ferramentas úteis

Por último e para ajudar a sua vida, considere usar uma ferramenta como a just-gimme-na-img. Com essa ferramenta, você pode fazer o upload de uma imagem e ela vai te disponibilizar:

● A imagem convertida em AVIF,
● Os comandos para usar o Squoosh em linha de comando para converter a sua imagem em vários tamanhos diferentes,
● E o código da tag <picture> para você incluir na sua aplicação.

Conclusão

Vimos que apesar do AVIF ter uma significante melhoria no quesito compactação e performance em comparação aos formatos tradicionais na web, o suporte entre os browsers ainda não está totalmente abrangido. Isso nos leva a utilizar técnicas como adicionar um Polyfill e usar Content Negotiation com a tag <picture>.

Você pode começar a mudar as imagens do seu website e alterar o código para que ela seja suportada. Consumir menos recursos e otimizar uma aplicação web são a chave para as aplicações do futuro, então, boa otimização para você.

Até a próxima,

Álvaro Junqueira: https://github.com/alvarocjunq