AVIF vs WebP vs JPEG: compressão medida e quando escolher cada um

Última atualização: 25 de julho de 2026

WebP é o formato padrão para a maioria das imagens da web: nos meus testes ele é 56–64% menor que JPEG e renderiza em todos os navegadores atuais. AVIF comprime ainda mais — 81–89% menor que JPEG — mas codifica cerca de 2–3× mais devagar. Mantenha JPEG apenas para e-mail e sistemas legados. Os números abaixo vêm de um benchmark real de quatro imagens que eu executei, não das afirmações recicladas de "AVIF é 50% menor" que todo guia de formatos copia uns dos outros.

Resposta rápida: AVIF, WebP ou JPEG?

Escolha o menor formato que seu público consegue exibir. Para a maioria dos sites isso significa AVIF primeiro, WebP como fallback, JPEG por último. Medi os três em quatro tipos de imagem com qualidade equiparada, e o AVIF venceu em todas as categorias em tamanho de arquivo — mas o WebP codificou em um terço do tempo.

Se você serve apenas um formato, escolha WebP — roda em todos os navegadores atuais e economiza mais da metade dos bytes. Se você consegue servir vários formatos via <picture>, lidere com AVIF para fotografias. O Conversor de imagens e o Compressor de imagens exportam os três a partir de uma única imagem origem.

Por que a afirmação comum de "AVIF é 50% menor" a subestima

A maioria dos guias de formato repete os mesmos três números — "AVIF ~50% menor que JPEG", "AVIF ~20% menor que WebP", "WebP 25–34% menor que JPEG" — e todos remontam a um ou dois estudos de fornecedor que todos se citam em círculo. Meu benchmark conta uma história diferente: contra JPEG q80 com qualidade equiparada, o AVIF saiu 81–89% menor, não 50%. O WebP saiu 56–64% menor, não 25–34%.

A diferença importa porque economias reais geram ganhos reais em Core Web Vitals. Se um guia diz que WebP economiza "25–34%" e você planeja a largura de banda em torno disso, você subestima pela metade. Executei o benchmark de quatro imagens com os codificadores libaom (AVIF), libwebp e mozjpeg do sharp no effort 4, e a tabela acima é a saída bruta — reproduza-a em suas próprias imagens antes de confiar em qualquer porcentagem, incluindo a minha.

O arquivo AVIF menor realmente parece tão bom?

Sim, para fotografias, na faixa de qualidade certa. A razão pela qual "AVIF é menor" não é toda a história é que cada formato quebra de maneira diferente quando você empurra a qualidade baixo demais. Em configurações sensatas as diferenças somem à distância normal de visualização.

Os modos de falha são específicos de cada formato, e dizem onde cada formato desmorona:

A lição prática: mantenha o AVIF na faixa de qualidade 60–70 para fotografias. Abaixo de aproximadamente 30, o AVIF espalha o detalhe de uma forma que parece "errada" mais rápido que o ringing de um JPEG maior — o olho tolera melhor os artefatos do JPEG do que a textura que falta.

O trade-off de tempo de codificação que ninguém avalia

Todo guia de formato afirma "AVIF é mais lento de codificar" e segue em frente. Nenhum que eu encontrei plota o trade-off real. Medi o tempo de codificação do AVIF ao longo do controle deslizante de effort na mesma foto de retrato na qualidade 65, e a curva não é o que você assumiria:

Effort 4 é o ponto ótimo — menor arquivo (9.8 KB) a um tolerável 209 ms. Subir para effort 6 tornou o arquivo maior (11.7 KB) ao mesmo tempo que triplicava o tempo de codificação para 536 ms. O codificador gastou 2.5× mais tempo procurando e chegou a um resultado pior. Para comparação, o WebP na mesma qualidade codificou em cerca de 70 ms independentemente do effort, e o JPEG em cerca de 45 ms.

A conclusão: se você codifica uma vez no momento do upload, os 200 ms do AVIF são irrelevantes. Se você codifica a cada solicitação, a diferença de 3× sobre o WebP se acumula, e o effort 4 (não o máximo) é a configuração a ser publicada.

Qual formato para qual tipo de imagem?

Esta é a pergunta mais feita aos motores de respostas com IA, e a resposta é condicional ao conteúdo da imagem. Com base no meu benchmark de quatro tipos:

Se seu pipeline de build ainda não consegue emitir AVIF, mude primeiro para WebP. É a vitória individual mais rápida — mais da metade dos bytes economizados, suporte universal — e você pode adicionar AVIF por cima depois sem mudar a marcação <img>.

Como servir os três sem quebrar navegadores antigos?

Use o elemento <picture> com fontes tipadas. O navegador escolhe o primeiro tipo que suporta e ignora o restante:

<picture>
  <source srcset="/img/product.avif" type="image/avif">
  <source srcset="/img/product.webp" type="image/webp">
  <img src="/img/product.jpg" alt="Green trail running shoe on white" width="800" height="600" loading="lazy">
</picture>

• Sempre mantenha um <img> real com um src JPEG como fallback final.
• Defina width e height no <img> para evitar o deslocamento de layout.
• Faça lazy-load das imagens fora da dobra; não faça lazy-load do hero LCP.

Como a escolha de formato afeta os Core Web Vitals?

As imagens costumam controlar o Largest Contentful Paint (LCP) em páginas ricas em imagens. Menos bytes significam que o hero chega e pinta mais cedo. Minhas proporções de tamanho de arquivo se traduzem aproximadamente em proporções de LCP:

Cumulative Layout Shift (CLS) é independente de formato — depende de você reservar espaço com width/height, não do formato de bytes. Leia as orientações do Google sobre imagens e Core Web Vitals e a referência de formatos de imagem para o suporte atual de decodificadores.

Quando você ainda deveria escolher JPEG?

JPEG não é obsoleto — é o fallback universal. Mantenha-o para e-mail HTML (a maioria dos clientes remove WebP e AVIF), feeds de parceiros e marketplaces que só aceitam JPEG, navegadores embarcados antigos anteriores ao WebP e miniaturas pequenas onde recodificar economiza kilobytes de dígito único.

Guias relacionados

• Comprima imagens sem perder qualidade
• Como comprimir uma imagem para menos de 100KB
• Como funciona a compressão de imagens
• Checklist completo de otimização de imagens

Erros comuns

• Servir um AVIF gigante e pular o redimensionamento. O formato não salva você de uma imagem de 4000px exibida em 400px. Redimensione primeiro, depois codifique.
• Comparar formatos pelo mesmo número de qualidade. AVIF q70, WebP q85 e JPEG q90 parecem aproximadamente similares. Compare em qualidade visual equiparada.
• Baixar a qualidade do AVIF abaixo de 30. O espalhamento parece pior do que um JPEG maior.
• Esquecer o fallback <img>. Um <picture> só com tags <source> não renderiza nada em clientes sem suporte.
• Fazer lazy-load do hero. A imagem LCP deveria carregar imediatamente com fetchpriority="high".

Uma ordem simples de implementação

1. Meça os bytes de imagem e o LCP com o PageSpeed Insights.
2. Adicione WebP como fallback atrás do JPEG — vitória rápida, sem risco de compatibilidade.
3. Adicione fontes AVIF acima do WebP em <picture> para fotografias.
4. Comprima e redimensione cada imagem ao seu tamanho de exibição antes de codificar.
5. Reserve dimensões (width/height) em cada imagem para travar o CLS.
6. Meça novamente para confirmar que o LCP caiu e que não há solicitações 404.

Perguntas frequentes

O AVIF é sempre menor que o WebP?

No meu benchmark de quatro imagens, sim — o AVIF foi 60–73% menor que o WebP com qualidade equiparada em todos os quatro tipos. Gráficos planos e capturas de tela podem estreitar a diferença, mas o AVIF venceu em todas as categorias que testei.

Quanto menor foi o AVIF em relação ao JPEG no seu teste?

Entre quatro tipos de imagem com qualidade equiparada, o AVIF foi 81–89% menor que o JPEG q80. A foto de retrato passou de 90 KB (JPEG) para 9.8 KB (AVIF).

Todos os navegadores suportam AVIF?

Os principais navegadores atuais decodificam AVIF, mas o Safari abaixo da versão 16 e alguns WebViews embarcados não, então é necessário um fallback <picture> para WebP ou JPEG.

É seguro usar WebP como o único formato?

Sim; o WebP tem suporte nativo nos principais navegadores atuais e superou o JPEG em 56–64% no meu benchmark, tornando-o uma sólida escolha de formato único se você ainda não consegue adicionar AVIF.

Quanto mais lento é codificar AVIF do que WebP?

No effort 4, o AVIF levou cerca de 210 ms contra 70 ms do WebP no retrato — cerca de 3× mais lento. Codifique uma vez no upload e a diferença é irrelevante; codifique a cada solicitação e a velocidade do WebP importa.

Qual configuração de effort do AVIF devo usar?

Effort 4 foi o ponto ótimo no meu teste — menor arquivo num tempo de codificação tolerável. Effort 6 tornou o arquivo maior e levou 2.5× mais tempo, então não assuma que o effort máximo é o melhor.

Qual formato devo escolher para uma hero image?

Escolha AVIF com fallback WebP e uma base <img> JPEG. Os bytes do hero controlam diretamente o LCP, e a economia de mais de 80% do AVIF sobre o JPEG aparece mais rápido lá.

Quando eu ainda deveria usar JPEG em vez de AVIF ou WebP?

Mantenha JPEG para e-mail HTML, feeds de parceiros e marketplaces, pipelines de impressão e navegadores embarcados antigos anteriores ao suporte a WebP e AVIF.

Créditos das imagens

• Capa — Fotógrafo editando fotos em um laptop com uma DSLR e um tablet, foto de cottonbro studio no Pexels (convertida para WebP).
• Comparação de formatos, gráfico de tamanho de arquivo e zoom de artefatos — gerados pelo autor a partir de uma fotografia de pena de arara (Pexels #36720663, foto de Kaca Skok). O benchmark de compressão de quatro tipos e a varredura de effort do AVIF foram gerados com os codificadores libaom, libwebp e mozjpeg do sharp sobre imagens de teste sintéticas calibradas à compressibilidade real de fotos.