Guia de Formatos de Imagem: PNG, JPG, WebP, SVG — Quando Usar Cada Um

Escolher o formato de imagem errado desperdiça banda, atrasa o carregamento de páginas e degrada a qualidade visual. Cada formato tem pontos fortes específicos — fotografias ficam melhores em um formato, logos em outro e ícones em outro. Este guia ajuda você a fazer a escolha certa sempre.

Tabela de Decisão Rápida

Análise Detalhada dos Formatos

JPEG (JPG)

O padrão para fotografias desde 1992. Usa compressão com perdas baseada na transformada discreta de cosseno (DCT).

Melhor para: Fotografias, cenas naturais, imagens complexas com gradientes. Evite para: Texto, logos, capturas de tela, imagens com bordas nítidas.

Pontos ideais de qualidade:

• Qualidade 85: Visualmente sem perdas para a maioria das fotos (melhor padrão)
• Qualidade 75: Bom equilíbrio para thumbnails web
• Qualidade 95: Quase sem perdas para impressão ou arquivo

Dica: JPEG não suporta transparência. Se você precisa de uma foto com fundo transparente, use WebP ou PNG.

PNG

Compressão sem perdas — cada pixel é preservado exatamente. Suporta transparência alfa completa.

Melhor para: Capturas de tela, elementos de UI, logos em fundos coloridos, qualquer imagem com texto. Evite para: Fotografias (arquivos serão 5-10x maiores que JPEG).

PNG-8 vs PNG-24:

• PNG-8: 256 cores, arquivos menores, adequado para gráficos simples
• PNG-24: 16 milhões de cores, arquivos maiores, necessário para fotografias ou gradientes

WebP

Formato moderno do Google que suporta compressão com e sem perdas, transparência e animação.

Melhor para: Tudo na web — é o melhor formato de uso geral. Evite para: Impressão (suporte limitado de software), e-mail (alguns clientes não exibem WebP).

Vantagens sobre JPEG: 25-35% menor com qualidade equivalente, suporta transparência. Vantagens sobre PNG: 26% menor para imagens sem perdas, suporta compressão com perdas. Suporte de navegadores: 97%+ globalmente.

Converta e otimize imagens com nosso Otimizador de Imagens.

SVG

Formato vetorial baseado em XML. Imagens são definidas por formas matemáticas, não pixels.

Melhor para: Logos, ícones, ilustrações, diagramas, qualquer gráfico que precise escalar. Evite para: Fotografias, imagens raster complexas.

Vantagens únicas:

• Escalável infinitamente sem perda de qualidade
• Tamanhos de arquivo minúsculos para gráficos simples (frequentemente menos de 1 KB)
• Estilizável com CSS (mudar cores, animar)
• Acessível (texto em SVG é pesquisável e lido por leitores de tela)
• Editável em qualquer editor de texto

<!-- Ícone SVG: 200 bytes vs PNG: 5.000 bytes -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

O formato mais recente, baseado no codec de vídeo AV1. Compressão superior ao WebP.

Melhor para: Imagens hero, fotos de produtos, qualquer imagem de alta prioridade onde compressão máxima importa. Considerações: 92% de suporte em navegadores, codificação mais lenta, suporte limitado de ferramentas de edição. Economia: 50% menor que JPEG com qualidade equivalente.

GIF

O formato de imagem web mais antigo (1987). Limitado a 256 cores.

Melhor para: Animações simples (mas WebP animado é melhor). Evite para: Quase todo o resto — WebP ou APNG são alternativas superiores. Uso legado: Ainda amplamente suportado em apps de mensagens e redes sociais para reações/memes.

Comparação de Tamanho (Mesma Imagem)

Uma fotografia de 1200×800 otimizada para web:

O mesmo gráfico (logo, 500×200):

Boa Prática Moderna: Elemento Picture

Sirva o formato ideal para cada navegador:

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

Navegadores escolhem o primeiro formato suportado. Todos recebem a melhor qualidade disponível no menor tamanho.

Fluxo de Otimização

1. Comece com a fonte de maior qualidade — nunca otimize a partir de uma imagem previamente comprimida
2. Escolha o formato certo usando a tabela de decisão acima
3. Redimensione para as dimensões de exibição — não sirva uma imagem de 4000px em um container de 800px
4. Comprima — use nosso Compressor de Imagens para otimização rápida
5. Sirva tamanhos responsivos — use srcset para diferentes larguras de viewport
6. Ative carregamento lazy — loading="lazy" para imagens abaixo da dobra

Para mais sobre otimização, veja nosso guia de Otimização de Imagens.

FAQ

Devo converter todas as minhas imagens para WebP?

Para entrega web, sim — WebP é o melhor formato de uso geral com 97%+ de suporte em navegadores. Mantenha arquivos originais em seu formato nativo (JPEG, PNG) para arquivo e edição, e converta para WebP para servir. Use o elemento <picture> para fornecer fallback JPEG para os raros navegadores que não suportam WebP.

O AVIF está pronto para uso em produção?

AVIF está pronto para produção com 92%+ de suporte em navegadores. As principais considerações são codificação mais lenta (3-10x mais lento que WebP) e suporte limitado de ferramentas de edição. Para sites estáticos onde imagens são codificadas uma vez durante o build, a velocidade de codificação não é um problema. Sempre forneça fallback WebP ou JPEG.

Recursos Relacionados

• Otimizador de Imagens — Comprima imagens para a web
• Redimensionador de Imagens — Redimensione para dimensões exatas
• Otimização de Imagens para a Web — Guia completo de otimização