Para a maioria dos sites em 2026, a resposta é em camadas: sirva AVIF para a maior economia (geralmente cerca de 50% menor que JPEG com qualidade similar), recorra a WebP para suporte quase universal e mantenha JPEG para os clientes mais antigos. AVIF vence em tamanho de arquivo, WebP vence em compatibilidade, JPEG vence por estar em todo lugar.
Se você tem se preocupado em qual formato de imagem de última geração adotar, aqui está a parte libertadora: você não precisa escolher apenas um. A abordagem moderna serve todos os três e permite que cada navegador pegue a menor versão que consegue decodificar. Este guia fornece a regra de decisão, as reais compensações de tamanho e suporte, e como cada formato impacta os Core Web Vitals, para que você pare de adivinhar e publique.
WebP vs AVIF vs JPEG: A Resposta Rápida#
Os três formatos estão em um espectro claro entre o mais novo e menor versus o mais antigo e seguro:
- JPEG (1992) é a base universal. Todo navegador, sistema operacional e dispositivo o abre. Também é o menos eficiente, então a mesma qualidade custa mais bytes.
- WebP (Google, 2010) geralmente é 25% a 35% menor que o JPEG com qualidade comparável, e agora tem suporte em praticamente todos os navegadores em uso. Esta é sua opção padrão segura.
- AVIF (2019, baseado no codec de vídeo AV1) é o mais eficiente dos três, frequentemente cerca de 50% menor que o JPEG e visivelmente menor que o WebP, com suporte em todos os principais navegadores atuais.
A decisão em uma linha: use AVIF como formato principal com WebP como fallback, e mantenha o JPEG apenas se precisar suportar clientes muito antigos. Sirva-os juntos com o elemento HTML <picture> para que o navegador escolha o melhor que entende.
Como os Três Formatos se Compararam#
As compensações se resumem a quatro fatores: tamanho do arquivo, suporte do navegador, recursos e custo de codificação. Veja a comparação lado a lado.
| Formato | Tamanho típico vs JPEG | Suporte do navegador | Transparência | Melhor para |
|---|---|---|---|---|
| JPEG | Linha de base (100%) | Universal, todos os navegadores | Não | Fotos, fallback, e-mail |
| WebP | ~25-35% menor | Todos os navegadores atuais | Sim (com perda + sem perda) | Padrão universal seguro |
| AVIF | ~50% menor | Todos os principais navegadores atuais | Sim, além de HDR/gama ampla | Imagens principais, economia máxima |
Alguns detalhes por trás da tabela:
- Os valores de tamanho são aproximados e dependem da imagem. Conteúdo fotográfico com gradientes suaves (céus, pele) é onde o AVIF se destaca mais. Gráficos simples com cores sólidas têm ganhos menores, e nesse caso um PNG ou SVG bem otimizado ainda pode ser melhor.
- Velocidade de codificação: o AVIF é mais lento para codificar do que WebP ou JPEG, o que importa para pipelines de build que comprimem milhares de imagens, mas é irrelevante para um upload único.
- Transparência: tanto WebP quanto AVIF suportam transparência alfa, então podem substituir PNG para imagens fotográficas com fundos transparentes, muitas vezes com uma fração do tamanho.
Uma observação prática sobre qualidade: não busque o menor arquivo absoluto. Em configurações muito agressivas de AVIF, você pode introduzir artefatos borrados, como "aquarela", em detalhes finos. Busque o menor arquivo que ainda pareça limpo no tamanho original, não o menor arquivo possível.
Por que o tamanho do arquivo decide os Core Web Vitals#
Esta é a parte que conecta a escolha do formato às classificações e à receita. As imagens geralmente são o elemento mais pesado de uma página, e a maior imagem é frequentemente o elemento Largest Contentful Paint (LCP), a imagem principal ou em destaque que define quando o Google considera sua página "carregada".
O LCP é um dos Core Web Vitals do Google, e um LCP lento prejudica tanto a experiência do usuário quanto o desempenho na busca. A matemática é direta: se sua imagem principal é um JPEG de 400 KB e a versão em AVIF tem 200 KB, você reduziu pela metade os bytes que o navegador precisa baixar antes que o LCP seja acionado. Em uma conexão móvel, isso pode ser a diferença entre uma pontuação "boa" e "precisa de melhorias".
Mais duas vantagens relacionadas ao tamanho que merecem destaque:
- Largura de banda e custo: imagens menores significam menos dados transferidos, o que reduz as contas de CDN e ajuda usuários em conexões limitadas ou lentas.
- Eficiência de rastreamento: páginas mais leves renderizam mais rápido para todos, incluindo a etapa de renderização que os mecanismos de busca realizam.
A conclusão é que "melhor formato de imagem para a web" é, na verdade, uma questão de Core Web Vitals. Imagens menores e servidas corretamente são uma das correções de velocidade de página de maior alavancagem que você pode fazer.
Como Servir Todos os Três com Uma Única Tag#
Você não escolhe um único formato para todo o seu site. Você fornece os formatos modernos e um fallback, e o navegador seleciona o primeiro que consegue decodificar. O elemento <picture> lida com isso nativamente.
Passo 1: Comprima sua imagem de origem nos três formatos#
Comece com sua imagem original de alta qualidade (o JPEG ou PNG bruto direto da câmera ou ferramenta de design). Exporte um AVIF, um WebP e um JPEG otimizado da mesma imagem nas mesmas dimensões. Um compressor de imagens gratuito faz isso em uma única passagem e roda inteiramente no seu navegador, então a foto original nunca é enviada para um servidor.
Passo 2: Insira-os em um elemento picture#
Liste os formatos do menor para o maior. O navegador lê de cima para baixo e para no primeiro type que suporta, então o AVIF vai primeiro, o WebP em segundo, e o <img> JPEG simples é o fallback universal.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Texto alternativo descritivo" width="1200" height="630">
</picture>
Mantenha os atributos width e height no <img>. Eles permitem que o navegador reserve espaço antes do carregamento da imagem, o que evita mudanças de layout (CLS, outro Core Web Vital).
Passo 3: Remova metadados e redimensione antes de comprimir#
Duas vitórias fáceis antes de escolher um formato. Primeiro, redimensione para as dimensões reais de exibição. Servir uma foto de 4000px em um espaço de 1200px desperdiça bytes que nenhum codec pode recuperar, então use um redimensionador de imagens para ajustar ao tamanho real do layout. Segundo, remova metadados EXIF (modelo da câmera, coordenadas GPS, timestamps), que adicionam peso e podem vazar dados de localização privados. Bons compressores removem isso automaticamente.
Passo 4: Deixe a ferramenta escolher automaticamente o menor#
Em vez de comparar três exportações manualmente, comprima nos três formatos e compare os tamanhos de saída diretamente. O compressor de imagens gratuito mostra o tamanho em bytes resultante para cada formato a partir de um único upload, para que você possa escolher o menor que ainda pareça limpo, sem tentativa e erro manual.
Com perda vs Sem perda e como escolher o nível de qualidade#
Os três formatos geralmente são usados no modo com perda para fotos, descartando detalhes que o olho mal percebe em troca de arquivos drasticamente menores. WebP e AVIF também suportam o modo sem perda, que mantém cada pixel, mas gera arquivos maiores, útil para capturas de tela, diagramas ou imagens com texto nítido e cores sólidas.
A configuração de qualidade é onde ocorre a maior economia (e também a maioria dos erros):
- Qualidade JPEG 75-85 é o ponto ideal para fotos. Abaixo de ~70, você começa a ver artefatos de blocos nas bordas.
- Qualidade WebP 75-80 equivale aproximadamente ao JPEG 85 em um tamanho menor, pois o WebP comprime de forma mais eficiente na mesma qualidade percebida.
- Qualidade AVIF 50-65 geralmente parece tão limpa quanto uma configuração JPEG muito mais alta. A escala de qualidade do AVIF não é diretamente comparável à do JPEG, portanto, não assuma que "qualidade 80" significa a mesma coisa entre os formatos.
O método confiável não é confiar em um número, mas comparar o resultado. Codifique a imagem, visualize-a no tamanho de exibição completo e reduza a qualidade até ver o primeiro artefato; então, volte um nível. Isso fornece o menor arquivo aceitável para aquela imagem específica, o que é sempre melhor do que uma configuração de qualidade genérica aplicada a tudo.
Uma armadilha sutil: recomprimir uma imagem já com perda (pegar um JPEG e salvá-lo como WebP com perda) acumula a perda. Sempre exporte seus formatos modernos a partir do original de maior qualidade que você tiver, não de uma cópia previamente comprimida.
Imagens Responsivas: Servindo o Tamanho Certo, Não Apenas o Formato Certo#
O formato é metade da equação de velocidade de página. A outra metade são as dimensões. Um celular com tela de 400px de largura não tem utilidade para uma imagem de 1600px, e enviar a grande desperdiça bytes, independentemente do formato.
Os atributos srcset e sizes permitem oferecer vários tamanhos da mesma imagem e deixar o navegador escolher com base na tela e resolução do dispositivo. Você pode combinar isso com <picture> para que cada formato também venha em múltiplas larguras.
<picture>
<source
type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 400px, 1200px">
<img src="hero-800.jpg" alt="Texto alternativo descritivo" width="1200" height="630">
</picture>
Isso combina a vantagem do formato (AVIF sobre JPEG) com a vantagem do tamanho (uma imagem de 400px para celulares), e as duas economias se acumulam. Para um site de conteúdo onde o mesmo artigo é lido em celulares e desktops, essa combinação costuma ser a maior melhoria individual de LCP em dispositivos móveis.
Se escrever essa marcação manualmente for demais, a maioria dos frameworks modernos e plataformas CMS geram variantes AVIF e WebP e a marcação responsiva automaticamente no upload. O princípio é o mesmo de qualquer forma: o menor formato que o navegador suporta, no menor tamanho que o layout precisa.
Quando NÃO usar AVIF ou WebP#
Esses formatos são para fotografias e imagens raster complexas. Eles são a ferramenta errada para dois casos comuns:
- Logos, ícones e arte linear: use SVG. É um formato vetorial, então permanece nítido em qualquer tamanho e geralmente é muito pequeno. Se você só tem um logo raster, nosso guia e ferramenta para converter SVG para PNG cobre o caminho inverso.
- Animações: loops curtos são muito melhor servidos como um vídeo mudo e com reprodução automática (MP4 ou WebM) do que como um GIF animado pesado ou até mesmo WebP animado.
Há também o caso extremo de alguns clientes muito antigos ou nichados que não decodificam AVIF nem WebP. É exatamente para isso que serve o fallback JPEG no seu elemento <picture>, então você não perde nada ao incluí-lo.
A Regra de Decisão de 2026, Resumida#
Juntando tudo, o fluxo de trabalho é curto:
- Padrão para AVIF, fallback para WebP, mantenha JPEG como rede de segurança. Sirva todos os três com
<picture>e deixe o navegador escolher. - AVIF para hero e fotos grandes, onde sua economia de ~50% sobre JPEG faz mais diferença para o LCP.
- WebP se você servir apenas um formato moderno, porque seu suporte é praticamente universal e ainda supera o JPEG confortavelmente.
- SVG para logotipos e ícones, nunca um formato raster.
- Redimensione primeiro, remova metadados, depois comprima, e deixe a ferramenta informar qual formato ficou menor.
A escolha do formato é apenas uma alavanca. Para o panorama completo sobre como reduzir o peso da página sem prejudicar a qualidade, veja nosso guia sobre como usar um compactador de imagens gratuito para acelerar o site.
Perguntas Frequentes#
AVIF é melhor que WebP? Para tamanho de arquivo, geralmente sim. AVIF normalmente produz arquivos menores que WebP com qualidade similar, muitas vezes de forma perceptível em imagens fotográficas, e adiciona suporte a HDR e ampla gama de cores. WebP codifica mais rápido e tem suporte universal há um pouco mais de tempo, por isso o padrão comum é AVIF primeiro com WebP como fallback.
Quanto menor é AVIF comparado a JPEG? Em conteúdo fotográfico típico, AVIF costuma ser cerca de 50% menor que JPEG com qualidade visual comparável, embora a economia exata dependa da imagem. Fotos com gradientes suaves têm os maiores ganhos, enquanto gráficos de cores planas têm menos, onde SVG ou PNG podem ser a melhor escolha.
Devo usar WebP para tudo? WebP é um padrão seguro e forte porque seu suporte a navegadores é praticamente universal e supera JPEG em tamanho. Mas servir AVIF como formato principal com WebP como fallback gera arquivos ainda menores, sem custo de compatibilidade, já que o navegador só aceita AVIF se conseguir decodificá-lo.
Esses formatos prejudicam o SEO? O oposto. Imagens menores aceleram o Largest Contentful Paint, um Core Web Vital que afeta tanto a experiência do usuário quanto o desempenho em buscas. Apenas mantenha texto alternativo descritivo e atributos de largura e altura corretos para também evitar mudança de layout.
Como converter JPEG para WebP ou AVIF gratuitamente? Envie sua imagem para um compressor de imagens gratuito baseado em navegador, que exporta WebP e AVIF sem enviar o arquivo para um servidor. Comprima para todos os três formatos de uma vez e mantenha o que ficar menor, mas ainda com boa aparência em tamanho real.
Qual é o menor formato de arquivo de imagem para a web? Para fotografias, AVIF geralmente é o menor dos formatos raster comuns, à frente de WebP e muito à frente de JPEG. Para logotipos, ícones e arte linear, SVG é ainda menor por ser baseado em vetores e escalar sem adicionar pixels.
