WebP, AVIF, JPEG, PNG: qual formato usar

A bifurcação que vem antes do formato

Antes de escolher JPEG ou WebP ou AVIF, escolha entre compressão com perda e sem perda, essa é a decisão que realmente importa, e o nome do formato é quase consequência dela. Compressão com perda descarta informação que o olho tende a não notar e nunca mais a recupera: o arquivo fica menor de forma irreversível. Compressão sem perda reorganiza os mesmos bits de um jeito mais econômico e reconstrói a imagem idêntica, pixel por pixel. Uma foto de paisagem tolera perda sem que você perceba; um diagrama com texto e bordas nítidas denuncia a perda na hora, com halos e sujeira em volta das letras.

Repare que WebP e AVIF aparecem nas duas colunas: cada um tem um modo com perda e um sem perda, e são quase codecs diferentes por dentro. Já JPEG só existe com perda na prática (o modo sem perda do padrão nunca pegou), e PNG só existe sem perda. Por isso a bifurcação vem primeiro: ela elimina metade das opções antes de você comparar tamanho. Quando quiser mexer no dial da qualidade e ver o arquivo encolher, o compressor de imagem faz isso no navegador, sem enviar a foto a servidor nenhum.

O que cada formato realmente faz

JPEG converte a imagem para o espaço YCbCr (separa brilho de cor), quase sempre subamostra a cor, o famoso 4:2:0, que guarda cor com metade da resolução horizontal e vertical porque o olho é menos sensível a ela, e aplica a Transformada Discreta de Cosseno em blocos de 8×8 pixels, quantizando os coeficientes. Daí vêm os dois artefatos clássicos: blocagem e "ringing" em torno de bordas. JPEG não tem canal alfa (nada de transparência) e, no modo progressivo, os dados chegam em varreduras que refinam a imagem inteira do borrado ao nítido, útil em conexões lentas.

PNG é sem perda: filtra cada linha de pixels (predizendo cada um a partir dos vizinhos, à la Paeth) e comprime o resultado com DEFLATE, o mesmo algoritmo do ZIP. Guarda um canal alfa de verdade e vem em dois sabores: PNG-8, com paleta indexada de até 256 cores (ótimo para ícones simples), e PNG-24/32, truecolor com ou sem alfa. É excelente para o que tem poucas cores e bordas nítidas, e horrível para fotografia, sem perda não há detalhe "invisível" a jogar fora, então o grão natural de uma foto vira um arquivo enorme.

WebP, do Google, é na verdade dois codecs sob um nome. O modo com perda reaproveita a codificação intraquadro do vídeo VP8, trata a foto como um único frame-chave, e é limitado a 8 bits por canal e subamostragem 4:2:0. O modo sem perda é um algoritmo à parte, mais eficiente que o PNG. Os dois suportam alfa, inclusive o com perda (uma coisa que o JPEG nunca teve), e o WebP também faz animação. É suportado por todos os navegadores modernos há anos.

AVIF é o irmão em imagem estática do vídeo AV1, da Alliance for Open Media, empacotado no mesmo tipo de contêiner (ISOBMFF/HEIF) que o HEIC da Apple. É o mais capaz da lista: cor de 10 e 12 bits, HDR (com as curvas PQ e HLG), gamute amplo, subamostragem 4:2:0/4:2:2/4:4:4, canal alfa, animação e até síntese de grão de filme. Esse poder tem preço, codificar AVIF é caro de CPU, bem mais lento que JPEG ou WebP,, o que muda quando e onde faz sentido gerá-lo.

DCT (8×8)

Transformada Discreta de Cosseno aplicada em blocos de 8×8 pixels; a base da compressão do JPEG. Quantizar seus coeficientes é o que "perde" informação.

Subamostragem de croma

4:2:0 guarda a cor em resolução reduzida (o olho perdoa); 4:4:4 mantém cor em resolução plena, melhor para texto colorido e bordas finas.

DEFLATE

Compressão sem perda (LZ77 + Huffman) usada pelo PNG e pelo ZIP. Reduz redundância, mas não descarta detalhe, por isso não ajuda em fotografia.

Codificação intraquadro

Comprimir uma imagem como se fosse um único quadro-chave de vídeo. WebP herda isso do VP8; AVIF, do AV1, daí virem de codecs de vídeo.

Quanto você economiza, e por que o número depende de tudo

Os fabricantes publicam números, e eles são reais desde que você leia a letra miúda. O Google mede o WebP com perda entre 25% e 34% menor que um JPEG comparável no mesmo índice de qualidade SSIM, e o WebP sem perda 26% menor que o PNG. A Alliance for Open Media cita o AVIF em mais de 50% de economia sobre o JPEG (referenciando a Netflix) e mais de 30% sobre o WebP (referenciando a Vimeo). Tudo verdade, e tudo condicional.

Por que "condicional"? Porque a economia depende do conteúdo da imagem, da métrica de qualidade escolhida (SSIM, MS-SSIM, VMAF, butteraugli medem coisas diferentes) e do encoder e do preset. O próprio estudo da Netflix sobre AVIF reporta ganhos via BD-rate e evita o VMAF de propósito, por ele ter sido treinado para vídeo, não imagem estática. E os exemplos concretos do estudo mostram o abismo: numa imagem de teste, um JPEG de 13.939 bytes virou um AVIF de 4.176 bytes com qualidade comparável (queda de ~70%); em outra, um JPEG de 20.429 bytes e o AVIF de 19.788 bytes ficaram praticamente empatados (~3%). Mesmo codec, mesma qualidade-alvo, economia entre 3% e 70% dependendo só do que a foto mostra.

A forma do gráfico é o argumento central deste guia. JPEG e PNG são universais desde os anos 1990. O WebP passou dos 96% de suporte e chegou ao Safari em 2020. O AVIF, mais novo, está por volta de 93%, o que soa alto até você traduzir: cerca de 1 em cada 15 visitantes ainda não consegue exibir um AVIF. É exatamente por isso que "converta tudo para AVIF e pronto" quebra: sem uma alternativa, esses visitantes veem uma imagem quebrada.

A matriz de recursos

Tamanho é só um eixo. Muitas decisões se resolvem por capacidade: precisa de transparência? De animação? De reconstrução exata? De mais de 8 bits para um céu sem faixas? A matriz abaixo cruza os quatro formatos rasterizados com o que cada um oferece, mais a versão do Safari que passou a exibi-los e o custo relativo de codificação.

Duas linhas dessa tabela resolvem casos inteiros. Se você precisa de transparência, JPEG está fora, vá de PNG, WebP ou AVIF. Se você precisa de mais de 8 bits (um degradê de céu ou pele sem faixas visíveis), só o AVIF entrega na web, e é aqui que ele vence o WebP não por tamanho, mas por capacidade: o WebP com perda é preso a 8 bits e 4:2:0. Precisa de reconstrução exata de um print com texto? Qualquer coluna "sem-perda" com "Sim" serve.

A entrega correta: <picture> com fallback

Como AVIF e WebP não são universais, a entrega certa não é escolher um formato, é oferecer vários e deixar o navegador pegar o primeiro que ele entende. O elemento <picture> faz isso: o navegador percorre os <source> na ordem, pula os tipos que não suporta e usa o primeiro compatível; o <img> no fim é o fallback universal que carrega o alt e as dimensões. Coloque o formato mais eficiente e menos suportado no topo, e o mais compatível embaixo.

<picture>
  <source type="image/avif" srcset="foto.avif" />
  <source type="image/webp" srcset="foto.webp" />
  <img
    src="foto.jpg"
    alt="Descrição da imagem"
    width="1200"
    height="800"
    loading="lazy"
    decoding="async"
  />
</picture>

É por isso que "converter tudo para AVIF" é conselho ruim: a entrega correta não é um arquivo, é uma cadeia, e você gera as variantes num pipeline de build ou numa CDN de imagens, não à mão. Para gerar as versões, o conversor de imagem transcodifica entre formatos no navegador; se o material de origem for vetorial, o conversor de SVG para PNG rasteriza na resolução que você pedir. Mantenha sempre o original sem perda arquivado, de um mestre em PNG ou TIFF você regera AVIF e WebP quando o suporte mudar; de um AVIF já comprimido, não há como voltar.

Como decidir, por tipo de conteúdo

Junte a bifurcação (perda vs sem perda), a matriz de recursos e o suporte, e a decisão vira mecânica. Classifique a imagem pelo que ela contém, não pelo formato em que ela chegou:

• Fotografia (paisagem, retrato, produto): com perda. AVIF no topo pelo tamanho e pelos 10 bits, WebP como segundo, JPEG de fallback, servidos por <picture>.
• Gráfico com áreas chapadas e texto (diagramas, infográficos): sem perda. PNG ou WebP lossless preservam as bordas; JPEG e o AVIF/WebP com perda sujam as letras.
• Logo, ícone ou ilustração vetorial: SVG. Escala sem perda de nitidez, pesa pouco e não precisa de um arquivo por resolução.
• Captura de tela com texto: PNG ou WebP sem perda. É texto sobre fundo chapado, o mesmo caso do diagrama.
• Precisa de transparência sobre foto (sombra suave, PNG com alfa pesado): WebP ou AVIF com alfa, que comprimem o alfa muito melhor que o PNG-32.

Falta um formato que você encontra fora da web: o HEIC. A Apple o adotou como padrão da câmera do iPhone porque ele guarda fotos com muito menos espaço que o JPEG, é o mesmo codec HEVC do vídeo, no contêiner HEIF, primo do AVIF. A web praticamente não o usa por dois motivos: o HEVC é onerado por patentes e licenciamento, e os navegadores não o exibem nativamente. Por isso, se você recebeu um .heic e precisa publicá-lo, converta antes, o conversor de HEIC para JPG faz isso no navegador, e vale lembrar que, ao converter, você pode carregar junto os metadados EXIF de localização e câmera.

Um último detalhe de cor, para quem entrega AVIF em 10 bits ou lida com transparência: entender como valores de cor são escritos e por que um degradê ganha faixas ajuda a diagnosticar o "banding" que o 8 bits do JPEG e do WebP produzem. O guia de espaços de cor: HEX, RGB e HSL cobre isso, e se as suas imagens forem responsivas por tamanho, combine <picture> com tipografia e layout fluidos usando clamp().