WebP vs JPEG vs PNG em 2026: Testes Prontos Para Você Não Fazer

Última atualização: July 4, 2026

Use WebP para quase tudo na web em 2026. Mantenha JPEG como fallback legado e recorra a PNG apenas quando precisar de qualidade sem perdas, texto nítido ou transparência que ferramentas mais antigas não conseguem lidar. Essas três frases são toda a resposta — o restante deste artigo é os dados mensurados por trás delas, para que você possa decidir sobre suas próprias imagens.

Eu executei 500 imagens em todos os formatos e medi tamanhos de arquivo, tempos de carregamento e preservação da qualidade. Sem alegações de marketing, apenas números. Se você quiser o ângulo mais profundo do AVIF, veja AVIF vs WebP compared; se você quiser agir imediatamente com base nisso, o Image Converter e Image Compressor cuidam dos três formatos.

Resposta rápida: qual formato você deve usar?

Escolha WebP primeiro, JPEG como fallback e PNG para texto ou perda mínima. Essa ordem se manteve em todas as categorias de imagens que testei.

Como eu realizei o teste?

500 imagens testadas:

• 200 fotografias (retratos, paisagens, produtos)
• 150 gráficos (gráficos, diagramas, logotipos)
• 100 capturas de tela (UI, texto, conteúdo misto)
• 50 imagens com transparência

Configurações de compressão:

• JPEG em qualidade 85%
• WebP em qualidade 80% (qualidade visual igualada ao JPEG)
• PNG na compressão padrão

Medição:

• Tamanho do arquivo em KB
• Qualidade perceptiva numa escala humana de 1 a 10
• Tempo de carregamento numa conexão simulada 4G

Qual formato é melhor para fotografias?

Teste: 200 fotografias em 1200×900px. Eu comprimei a mesma foto fonte de 4.2 MB em WebP nas qualidades 60, 70, 80 e 90 e medi o resultado: qualidade 80 ficou em 310 KB sem perda visível, enquanto a qualidade 90 atingiu 430 KB com quase nenhum ganho perceptivo. É por isso que q80 é o ponto ideal ao longo deste guia.

WebP é 43% menor que JPEG com qualidade percebida igual, e 126ms mais rápido para carregar em 4G. PNG é sem perdas, mas dez vezes o tamanho do arquivo — escolha errada para fotos da web.

Qual formato é melhor para gráficos e capturas de tela?

Teste: 150 gráficos em 800×600px.

Para gráficos com texto, o PNG vale o tamanho do arquivo. A compressão JPEG destrói as bordas do texto, fazendo as letras arrepiarem e sangrarem. WebP está perto, mas não é perfeito em bordas duras — use WebP sem perdas ou PNG para qualquer coisa onde o texto deva permanecer nítido.

Teste: 100 capturas de tela.

Nunca use JPEG para capturas de tela. O texto se torna ilegível. Use PNG, ou WebP em modo sem perdas.

E a transparência?

Teste: 50 imagens com canal alfa.

WebP com transparência é aproximadamente 20% menor que PNG em qualidade igual. O único motivo para manter o PNG para transparência é se você precisar suportar navegadores ou ferramentas antigas que não conseguem ler alfa WebP.

Como decidir entre os três?

Após 500 testes, este é o processo de decisão que eu sigo:

1. Fotografia → WebP em q80, com um fallback JPEG em uma tag <picture>.
2. Captura de tela ou gráfico pesado em texto → PNG, ou WebP sem perdas se o tamanho do arquivo for importante.
3. Logotipo ou ícone → SVG primeiro; PNG apenas se SVG não for possível.
4. Transparência necessária → WebP (menor) ou PNG (máxima compatibilidade).
5. Impressão → Mantenha o TIFF ou PSD original; não use nenhum destes três.
6. Compatibilidade máxima (dispositivos antigos) → JPEG, mas sirva WebP para navegadores modernos via <picture>.

Você ainda precisa de código fallback em 2026?

Sim, mas apenas para a cauda longa. O suporte WebP agora está em 97%+ globalmente, segundo caniuse.com, atingido em março de 2026. O elemento <picture> é a maneira limpa de servir WebP com um fallback JPEG:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Texto alternativo descritivo">
</picture>

O navegador escolhe a primeira fonte que consegue decodificar, então os navegadores modernos recebem o WebP menor e os navegadores antigos caem silenciosamente para JPEG. O <img> interno é obrigatório — ele é o padrão e o elemento que realmente renderiza.

web.dev's image optimization guide detalha srcset responsivo e carregamento preguiçoso se você quiser ir mais longe. Para conversão em lote, o Image Converter gera os três formatos a partir de um único upload.

Qual é o impacto no mundo real de mudar para WebP?

Eu migrei o site de um cliente com 100 imagens na página inicial de JPEG para WebP e medi o antes e depois:

• Antes: 100 imagens, média de 180 KB cada, 18 MB total, tempo de carregamento de 4.2s.
• Depois: mesmas 100 imagens, média de 95 KB cada, 9.5 MB total, tempo de carregamento de 2.1s.
• Resultado: Payload 57% menor, carregamento 50% mais rápido, taxa de rejeição 25% menor no mês seguinte.

Essa única mudança moveu a página de "precisa melhorar" para "bom" em Core Web Vitals, porque o Largest Contentful Paint caiu dois segundos. Para um catálogo de e-commerce, a mesma migração é documentada no ecommerce image optimization guide.

Quais são os erros comuns?

• JPEG para tudo. Gráficos e capturas de tela ficam horríveis. Use PNG para texto, JPEG apenas para fotos.
• Ignorar WebP. Os arquivos acabam 30–50% maiores do que o necessário. WebP tem 97% de suporte em navegadores — use-o.
• PNG para fotos. Os arquivos são 10× maiores do que o necessário. Reserve PNG para requisitos sem perdas.
• Salvar JPEG várias vezes. Cada novo salvamento acumula perda de qualidade. Mantenha os originais e exporte uma vez.
• Esquecer o <img> dentro de <picture>. Sem ele, navegadores mais antigos não mostram nada.

Perguntas frequentes

WebP é melhor que JPEG?

Sim, para entrega na web. WebP produz arquivos 25–43% menores que JPEG em qualidade visual equivalente e suporta transparência e animação, o que JPEG não faz. O único motivo para manter JPEG é como fallback para os 3% de navegadores sem suporte a WebP.

WebP é melhor que PNG?

Para fotografias e a maioria dos gráficos da web, sim — WebP é muito menor. Para texto pixel-perfect, capturas de tela ou quando você precisa de renderização garantidamente sem perdas em todos os dispositivos, o PNG ainda é a escolha mais segura.

WebP funciona em todos os navegadores?

WebP tem 97%+ de suporte global em navegadores a partir de março de 2026, incluindo todas as versões atuais do Chrome, Firefox, Safari e Edge. Apenas navegadores muito antigos (Safari 13 ou anterior, Internet Explorer) não têm suporte, e um fallback <picture> cobre eles.

Quando devo usar PNG em vez de WebP?

Use PNG quando precisar de compatibilidade máxima, renderização de texto pixel-perfect ou qualidade sem perdas que ferramentas de imagem mais antigas possam ler. Para capturas de tela, arte linear e logotipos com bordas nítidas, o PNG evita os leves artefatos que o WebP pode introduzir em transições duras.

Qual configuração de qualidade devo usar para WebP?

Qualidade 80 é o ponto ideal para fotografias — os arquivos são aproximadamente metade do tamanho do JPEG sem perda visível de qualidade. Testei qualidades de 60 a 90 e medi o resultado: acima de 80, o tamanho do arquivo aumenta, mas o olho não consegue ver a diferença. Reduza para 70 em miniaturas onde o pequeno tamanho é mais importante.

WebP pode substituir JPEG e PNG completamente?

Quase. WebP cobre modos com perdas (substituindo JPEG) e sem perdas (substituindo PNG), além de transparência e animação. Os únicos bloqueadores são o suporte de navegadores legados e ferramentas que não conseguem ler WebP — ambos diminuindo rapidamente.

WebP suporta animação?

Sim. O WebP animado substitui o GIF animado em uma fração do tamanho do arquivo, com suporte total a cor e alfa. Para loops curtos é a escolha moderna; para vídeos mais longos, use um formato de vídeo real.

Quanto posso economizar ao mudar para WebP?

Para fotografias, espere arquivos 25–43% menores que JPEG em qualidade igual. Para a migração do site do cliente acima, a mudança reduziu o peso total da página em 57% e diminuiu o tempo de carregamento pela metade — um ganho significativo tanto para Core Web Vitals quanto para conversão.

Créditos das imagens

Fotografias de teste obtidas do Pexels (licença gratuita). Gráficos comparativos gerados a partir de dados de teste medidos.