Formatos de Imagem Explicados: JPEG, PNG, WebP, GIF, SVG, AVIF

Última atualização: June 27, 2026

Não existe um único formato de imagem ideal — cada um existe porque resolve um problema diferente. JPEG comprime fotografias, PNG preserva bordas nítidas e transparência, WebP e AVIF encolhem as fotos ainda mais, SVG escala sem pixels e GIF anima. Escolher o certo é uma decisão de conteúdo, não uma preferência. Este guia cobre o que cada formato faz, com tamanhos de arquivo reais medidos a partir de uma imagem fonte.

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

Combine o formato com o conteúdo da imagem e onde ela será exibida:

Para a análise detalhada de formato versus formato, veja a comparação AVIF vs WebP vs JPEG.

Como os formatos se comparam?

As diferenças de tamanho de arquivo são grandes e consistentes. Medido em uma fotografia 1400×933:

Os 853 KB do PNG se destacam: o armazenamento lossless de uma fotografia custa aproximadamente 8× mais que JPEG e 19× mais que AVIF. É por isso que o PNG está errado para fotos de página inteira, mesmo estando tecnicamente capaz de armazená-las.

JPEG — o cavalo de batalha das fotografias

JPEG (1992) é o formato com perdas (lossy) para fotografias. Ele descarta detalhes de alta frequência que o olho mal consegue ver, razão pela qual encolhe fotos dramaticamente, mas embaça texto nítido e linhas finas.

• Melhor para: fotografias, gradientes, cenas complexas do mundo real.
• Evitar para: texto, capturas de tela de UI, arte linear nítida, qualquer coisa que precise de transparência (JPEG não tem canal alpha).
• Cuidado com: artefatos visíveis de blocos 8×8 abaixo da qualidade ~70.

Use a qualidade 80–85 para fotos web. Veja como comprimir JPEG.

PNG — bordas nítidas e transparência

PNG é lossless e suporta um canal alpha completo, preservando assim cada pixel e qualquer transparência. O custo é o tamanho do arquivo: ele não comprime fotografias bem.

• Melhor para: gráficos com bordas nítidas, texto, logos, capturas de tela de UI, imagens transparentes.
• Evitar para: fotografias de página inteira (use WebP/AVIF/JPEG em vez disso — veja a tabela acima).
• Cuidado com: arquivos enormes em fotografias. Reduza com PNG-8 (≤256 cores) para gráficos planos.

Para detalhes sobre transparência, veja como criar imagens transparentes.

WebP — o padrão moderno da web

WebP (2010) faz tanto lossy quanto lossless, suporta alpha e supera JPEG em ~25–35% com qualidade correspondente. O suporte de navegadores modernos é de ~98%.

• Melhor para: fotografias web e imagens web transparentes onde os bytes importam.
• Evitar para: e-mail e clientes muito antigos (use fallback JPEG/PNG).
• Sirva com: um fallback JPEG/PNG em um elemento <picture>.

AVIF — as fotos menores

AVIF (2019) usa as ferramentas intra-frame do codec de vídeo AV1 e supera WebP em mais 20–30%. O suporte é de ~96% e crescendo.

• Melhor para: fotografias onde os bytes menores importam (imagens hero, LCP).
• Evitar para: quando você não pode pagar por codificação lenta, ou para os navegadores muito antigos (use o fallback <picture>).
• Cuidado com: borrões de textura fina em qualidade muito baixa (<q40).

SVG — vetores que escalam

SVG é um formato vetorial: ele armazena formas, não pixels, por isso escala para qualquer tamanho sem perder nitidez e é minúsculo para arte simples.

• Melhor para: logos, ícones, ilustrações simples, tudo que deve escalar.
• Evitar para: fotografias (SVG não consegue representá-las eficientemente).
• Cuidado com: complexidade — um SVG detalhado pode ser grande; rasterize se necessário.

GIF — legado de animação

GIF anima e suporta transparência de 1 bit, mas está limitado a 256 cores e é muito maior que os formatos animados modernos para o mesmo conteúdo.

• Melhor para: nada moderno — substitua por WebP ou AVIF animados.
• Evitar para: qualquer coisa crítica em termos de cor (limite de 256 cores) ou sensível ao tamanho.
• Cuidado com: arquivos grandes; um GIF de 3 segundos é frequentemente maior que o MP4 do mesmo clipe.

Como escolher sob pressão?

Use este breve fluxo de decisão:

1. É uma fotografia? → WebP/AVIF (com fallback JPEG).
2. Precisa de transparência? → PNG ou WebP (alpha).
3. É um logo/ícone/ilustração que escala? → SVG.
4. É texto/UI nítido? → PNG.
5. É uma animação? → WebP/AVIF animado, não GIF.
6. É para e-mail? → JPEG ou PNG (sem WebP/AVIF).

Para quase todas as fotografias web, a resposta é agora "WebP ou AVIF com um fallback JPEG". O JPEG permanece apenas devido à compatibilidade universal, e não porque seja a melhor escolha.

Como servir múltiplos formatos?

Use o elemento <picture> para que cada navegador receba o melhor formato que ele suporta:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Descrição" width="800" height="600" loading="lazy">
</picture>

O navegador escolhe o primeiro tipo que suporta e ignora os demais. Mantenha sempre um <img> real com um src JPEG como fallback final. Veja o guia de formatos de imagem no MDN para a tabela atual de suporte por navegador.

Erros comuns

• Usar PNG para fotografias. Funciona, mas o arquivo é 8–19× maior do que o necessário.
• Usar JPEG para texto ou logos. A compressão embaça bordas nítidas. Use PNG ou SVG.
• Servir um formato sem fallback. AVIF/WebP precisam de um fallback JPEG para clientes antigos.
• Animar com GIF. WebP/AVIF animados são muito menores e suportam mais cores.
• Ignorar SVG para logos. Um logo rasterizado fica embaçado em alto DPI; o SVG permanece nítido em qualquer tamanho.

Perguntas frequentes

Qual formato de imagem devo usar?

JPEG para fotografias, PNG para gráficos com bordas nítidas ou transparência, WebP como padrão web moderno (menor que ambos), AVIF para as fotos menores em navegadores modernos e SVG para logos e ícones. Combine o formato com o conteúdo.

WebP é melhor que JPEG?

Para entrega web, sim — WebP é 25 a 35 por cento menor em qualidade igual e é suportado em todos os navegadores atuais. Mantenha o JPEG apenas como fallback para navegadores muito antigos. Veja o guia de conversão WebP.

Quando devo usar AVIF?

Quando você pode codificá-lo e seu público está principalmente em navegadores modernos — AVIF é aproximadamente 50 por cento menor que JPEG. O custo é uma codificação mais lenta e lacunas em navegadores mais antigos. Envie AVIF com um fallback WebP através de um elemento <picture>.

PNG suporta transparência?

Sim — PNG tem um canal alpha completo, razão pela qual é o formato para gráficos e logos com transparência. JPEG não suporta transparência. WebP e AVIF também suportam alpha, em tamanhos menores para entrega web.

Qual formato é o menor para fotos?

AVIF (o menor em navegadores modernos), depois WebP, depois JPEG. PNG é o maior para fotos porque é lossless. Para entrega web, WebP é o padrão seguro; AVIF quando você pode codificá-lo e seu público está em navegadores modernos.

Qual é o formato de imagem mais pequeno?

AVIF para fotos em navegadores modernos (aproximadamente 50 por cento menor que JPEG), depois WebP. PNG é o maior para fotos porque é lossless. Para gráficos com transparência, WebP ou AVIF superam o PNG. Combine o formato com o conteúdo e o suporte de navegador do seu público.

Qual a diferença entre lossy e lossless?

Lossless (PNG, WebP lossless) preserva cada pixel exatamente e reverte perfeitamente — nenhuma qualidade é perdida. Lossy (JPEG, WebP lossy, AVIF) descarta detalhes que o olho nota menos para encolher o arquivo, e a perda é permanente. Lossy vence em tamanho para fotos; lossless vence em qualidade para gráficos, texto e mestres que você irá editar novamente. Escolha pelo conteúdo.

Qual é o formato mais pequeno para gráficos com transparência?

WebP ou AVIF, ambos suportam um canal alpha e comprimem muito menores que PNG. Para logos e ícones em navegadores modernos, WebP ou AVIF reduzem drasticamente o tamanho do arquivo em comparação com PNG, mantendo a transparência. Sirva-os com um fallback PNG através de um elemento <picture> para navegadores mais antigos que não possuem suporte.

Créditos das imagens

• Comparação de tamanho do formato e gráfico de barras — gerado pelo autor a partir de uma fotografia estilo e-commerce (Pexels #16675632, foto por Mikael Blomkvist) para mostrar tamanhos de arquivo reais medidos em PNG, JPEG, WebP e AVIF.