PNG versus JPG versus WebP — Escolha o formato certo antes de seus usuários se irritarem

Você passou semanas perfeccionando seu site. O design é agudo, o código é limpo, e então você coloca uma imagem PNG de 3,8 MB no início da página e vê seu score do Lighthouse cair. Todos nós já passamos por isso.

Escolher o formato certo de imagem não é trabalho glamouroso, mas é uma das otimizações de maior impacto que você pode fazer para o tempo de carregamento da página, os Core Web Vitals e a experiência geral do usuário. Este guia corta o barulho para que você saiba exatamente quando usar PNG, JPG, WebP, AVIF ou até mesmo GIF — e por que escolher errado custa mais do que você imagina.

A Resposta Curta (Se Você Está em Pressa)

• Fotos e imagens complexas: Use WebP. Fale para JPG.
• Logos, ícones, capturas de tela com texto: Use WebP. Fale para PNG.
• Animações: Use WebP ou vídeo. GIF é uma última opção.
• Projetos avançados destinados a navegadores modernos: Tente AVIF.

Ainda lendo? Boa. Aqui está a visão completa.

PNG vs JPG vs WebP: O Que É Realmente Diferente?

JPG (JPEG) — O Trabalhador

O JPEG já existe desde 1992 e continua sendo uma das formas mais amplamente utilizadas na web — por uma boa razão. Ele usa compressão perdedora, o que significa que descarta dados da imagem para reduzir o tamanho do arquivo. Para fotografias, esse custo é quase invisível aos olhos humanos em níveis de qualidade de 70–85.

Onde o JPG falha: textos, desenhos, logotipos e qualquer coisa com bordas ou cores planas. Essa compressão perdedora introduz artefatos visíveis — manchas bloqueadas ao redor de textos, bordas sujas em ícones. Para esses casos, você precisa de compressão perdedora.

Tamanho típico de um arquivo JPG para uma foto de 1200×800: ~150–250 KB em boa qualidade.

PNG — Sem perda, com transparência e muitas vezes muito grande

O PNG usa compressão sem perda — cada pixel é preservado exatamente. Isso o torna a escolha certa para logotipos, capturas de tela, ilustrações com cores planas e qualquer imagem que precise de um fundo transparente. O JPG não pode fazer transparência. O PNG pode.

A questão: a compressão sem perda significa arquivos maiores. Uma foto colorida salva como PNG pode ser 3–5 vezes maior do que o equivalente em JPG. Isso é aceitável para um logotipo de 200×200. É um desastre para uma imagem de fundo completa.

Tamanho típico de um arquivo PNG para uma foto de 1200×800: ~2–4 MB. (Sim, realmente. É por isso que seu score do Lighthouse está chorando.)

WebP — O Padrão Moderno

Desenvolvido pela Google e agora suportado por todos os navegadores modernos, o WebP entrega arquivos 25–35% menores que o JPG em qualidade visual equivalente, e arquivos 26% menores que o PNG para imagens sem perda. Ele também suporta transparência, o que o torna capaz de substituir tanto o JPG quanto o PNG em muitos casos.

O WebP oferece modos com perda e sem perda, e suporta animações — tornando-se uma alternativa viável ao GIF também. O suporte nos navegadores é excelente: Chrome, Firefox, Safari (a partir da versão 14), Edge e Opera o tratam nativamente.

Tamanho típico de um arquivo WebP para uma foto de 1200×800: ~100–180 KB. Mesma qualidade, significativamente menor.

AVIF — O Limite Avançado

O AVIF é derivado do codec AV1 e oferece eficiência de compressão que coloca até o WebP em vergonha — muitas vezes 50% menor que o JPG em níveis de qualidade iguais. Ele também trata melhor do HDR e do gamut de cores ampliado do que qualquer outro formato web.

A desvantagem: o suporte nos navegadores, embora esteja crescendo, ainda não é universal (sem suporte em Safari para iOS 15 e versões anteriores), e a codificação é lenta. Para a maioria dos projetos em 2025, o WebP permanece o padrão mais seguro. Use AVIF se seu público for composto apenas por navegadores modernos ou se você tiver a infraestrutura para gerá-lo eficientemente.

GIF — O Formato Zumbi

O GIF é limitado a 256 cores, produz arquivos grandes para animações e já foi tecnicamente obsoleto há anos. No entanto, ele ainda está aqui, assolando canais do Slack e anúncios de lançamento de produtos em todo lugar.

Se você precisar animar algo na web, use uma animação WebP ou — melhor ainda — um vídeo MP4 em loop. Um GIF animado pode ser substituído por um arquivo de vídeo 10 vezes menor que reproduz com a mesma qualidade. A única razão válida para ainda usar o GIF em 2025 é a compatibilidade com plataformas que não suportam vídeo ou WebP (alguns clientes de e-mail, CMSs mais antigos).

Tabela de Comparação de Formatos

Aqui está a visão completa de forma resumida:

Formatar	Compressão	Transparência	Animação	Melhor para	Suporte ao navegador
JPG	Com perdas	Não	Não	Fotos, imagens realistas	Universal
png	Sem perdas	Sim (alpha)	Não	Logos, UI, imagens com texto	Universal
WebP	Perda e sem perda	Sim	Sim	Quase tudo	Todos os navegadores modernos
AVIF	Perda e sem perda	Sim	Sim	Fotos de alta qualidade, HDR	Chrome, Firefox, Safari 16+
GIF	Sem perda (256 cores)	Sim (1 bit)	Sim	Animações simples (herança)	Universal
SVG	Vetorial (escalável)	Sim	Sim (CSS)	Ícones, logotipos, ilustrações	Universal

Impacto Real no Core Web Vitals

O formato de imagem afeta duas métricas diretas dos Core Web Vitals:

Largest Contentful Paint (LCP)

O LCP mede quanto tempo leva para carregar o elemento mais visível — geralmente uma imagem de hero. Uma imagem PNG de 3 MB em uma conexão móvel pode esvaziar completamente seu orçamento de LCP. A mesma imagem em WebP de 300 KB carrega em fração do tempo. Os sinais de classificação do Google cuidam desse número.

Regra prática: sua imagem de LCP deve ter menos de 200 KB para a maioria dos casos. Se for uma imagem de fundo completa em um site moderno, busque menos de 150 KB. Use WebP. Se tiver uma fotografia particularmente complexa, combine WebP com srcset para servir tamanhos diferentes para diferentes telas.

Cumulative Layout Shift (CLS)

O CLS não é diretamente sobre formato, mas vale a pena mencionar aqui: se suas imagens carregam sem atributos explícitos width e height , a página refaz a disposição quando elas chegam. Defina sempre as dimensões nos <img> tags — independentemente do formato que você escolher.

Quando Usar Cada Formato: Guia de Decisão

Use JPG quando:

• Você precisa de compatibilidade universal (navegadores antigos, e-mails, CMSs antigos)
• Você está entregando fotografias a um público amplo e não pode servir WebP
• Você precisa de um fallback confiável dentro de um <picture> elemento

Use PNG quando:

• Você precisa de qualidade perfeita sem perda de pixels (capturas de tela para documentação, mockups de UI)
• Você precisa de transparência e não pode servir WebP
• A imagem tem bordas rígidas, cores planas ou texto, onde os artefatos do JPG seriam evidentes

Use WebP quando:

• Você está construindo qualquer projeto web moderno (isso deve ser seu padrão em 2025)
• Você quer arquivos menores que o JPG ou o PNG sem diferença de qualidade visível
• Você precisa de transparência sem o peso do PNG
• Você está substituindo o GIF por conteúdo animado

Use AVIF quando:

• Seu público está usando navegadores modernos e você quer máxima compressão
• Você está servindo fotografias com HDR ou com gamut ampliado
• Você tem infraestrutura de CDN que pode codificar AVIF no momento

Use SVG quando:

• A imagem é um ícone, logotipo ou ilustração que precisa escalar com precisão em qualquer tamanho
• Você quer animar ou estilizar elementos com CSS
• O tamanho do arquivo importa e a imagem é composta por caminhos, não por pixels

Como Servir Vários Formatos com

Você não precisa escolher apenas um formato — o elemento <picture> permite que você sirva o formato mais adequado para cada navegador:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Os navegadores escolhem o primeiro formato que eles suportam. Navegadores modernos recebem AVIF; navegadores um pouco mais antigos recebem WebP; todos os outros recebem JPG. Sem necessidade de JavaScript.

Converter Entre Formatos Online

Se você precisa converter imagens entre formatos sem instalar nada, a ferramenta Image Converter no site iotools.cloud trata PNG, JPG, WebP, AVIF, GIF e mais — diretamente no seu navegador. Faça o upload, escolha o formato de destino, baixe. Sem contas, sem marcas d’água.

É especialmente útil para conversões rápidas de umas poucas vezes: transformar um logotipo PNG de um cliente em WebP antes de colocá-lo na página, ou converter em massa capturas de tela para um site de documentação.

O Resultado Final

A era de defaultar para PNG ou JPG para tudo está acabada. O WebP oferece a melhor combinação de compressão, qualidade e compatibilidade para quase todos os casos de uso web — e deve ser seu ponto de partida em 2025. Mantenha JPG e PNG como fallbacks onde necessário, e mantenha olho no AVIF enquanto o suporte nos navegadores melhora.

Seus usuários não perceberão o formato. Eles perceberão se sua página carrega em dois segundos ou em oito. Faça a escolha certa antes que eles se irritem.

Você também pode gostar