Quando você precisa escolher um formato de imagem, a decisão errada gera um destes problemas: arquivo gigante, imagem borrada, ou perda de qualidade ao redimensionar. Cada formato tem um propósito específico — vou mostrar quando usar cada um.
A diferença fundamental: vetor vs raster
A primeira distinção importante é vetorial vs raster (também chamado bitmap).
Vetorial (SVG, EPS): a imagem é definida por equações matemáticas — linhas, curvas, formas, cores. Você pode esticar pra qualquer tamanho que nunca perde qualidade. Mas só serve pra ilustrações com formas definidas.
Raster (JPG, PNG, GIF, WebP): a imagem é uma grade de pixels. Cada pixel tem uma cor fixa. Funciona pra qualquer conteúdo (fotos, ilustrações, screenshots), mas se você esticar além do tamanho original, perde qualidade.
SVG: pra ilustrações que escalam
Quando usar SVG:
- Logos — escala perfeita em qualquer tamanho (favicon 16px ou outdoor)
- Ícones — nítidos em qualquer resolução de tela
- Gráficos e diagramas — barras, gráficos de pizza, fluxogramas
- Ilustrações geométricas — formas, padrões, decorações
Vantagens:
- Tamanho de arquivo pequeno (geralmente alguns KB)
- Escala infinita sem perder qualidade
- Pode ser editado com texto (XML)
- Estilizável com CSS na web
- Acessível (leitores de tela podem ler texto dentro)
Limitações:
- Não funciona pra fotografias
- Imagens complexas com gradientes detalhados ficam grandes
- Suporte de software variado (todos os navegadores OK, alguns programas antigos não)
PNG: pra gráficos com qualidade preservada
Quando usar PNG:
- Screenshots — texto fica nítido (JPG renderiza mal)
- Imagens com transparência — logo sobre fundo colorido, ícones recortados
- Ilustrações detalhadas — desenhos, pixel art, infográficos
- Imagens que vão ser editadas várias vezes — PNG é lossless, não degrada com saves repetidos
Vantagens:
- Compressão sem perdas (qualidade idêntica ao original)
- Suporta transparência (256 níveis)
- Universalmente compatível
Limitações:
- Arquivos significativamente maiores que JPG pra fotografias
- Não suporta animação (PNG animado existe mas é raro)
Comparação detalhada: leia JPG ou PNG?.
JPG: pra fotografias e cenas reais
Quando usar JPG:
- Fotografias — pessoas, paisagens, fotos de produto
- Imagens com transições suaves de cor — céus, peles, gradientes naturais
- Quando o tamanho do arquivo importa muito (envio por email, redes sociais)
- Imagens que serão exibidas em telas, não impressas em qualidade gráfica
Vantagens:
- Compressão muito eficiente pra fotos (10x menor que PNG na maioria dos casos)
- Universalmente compatível
- Padrão pra praticamente tudo fotográfico
Limitações:
- Não suporta transparência
- Compressão com perdas (qualidade degrada a cada save)
- Ruim pra texto e bordas nítidas (gera artefatos)
E WebP? E AVIF?
Formatos modernos que tentam ser “o melhor dos dois mundos”:
WebP: criado pelo Google em 2010. Combina compressão de JPG com qualidade lossless opcional e suporte a transparência. Tipicamente 25-35% menor que JPG/PNG mantendo qualidade equivalente.
AVIF: ainda mais novo (2019). Compressão ainda melhor que WebP. Suporte de navegador chegou em 2021-2023. Promissor mas ainda não universal.
Pra web em 2026, WebP é a melhor escolha pra maioria dos casos — combinando qualidade de PNG com compressão melhor que JPG. Leia mais em WebP vs PNG.
Tabela resumo
| Caso de uso | Melhor formato | Por quê |
|---|---|---|
| Logo de empresa | SVG | Escala perfeita em qualquer tamanho |
| Ícone de app | SVG ou PNG | Nitidez em qualquer DPI |
| Foto de produto pra e-commerce | JPG ou WebP | Tamanho pequeno, qualidade adequada |
| Screenshot pra documentação | PNG | Texto fica nítido |
| Foto pra rede social | JPG | Padrão aceito por todas plataformas |
| Imagem com fundo transparente | PNG | JPG não suporta transparência |
| Gráfico estatístico | SVG | Escala bem e é leve |
| Foto pra site moderno | WebP | Menor arquivo, qualidade igual |
| GIF animado curto | WebP ou GIF | WebP é melhor mas GIF é mais compatível |
| Ilustração com poucas cores | SVG ou PNG | SVG se for vetorial, PNG se já é bitmap |
Convertendo entre formatos
Pra raster (JPG, PNG, WebP), nossas ferramentas convertem em segundos no navegador:
- JPG para PNG — preserva qualidade pra edição
- PNG para JPG — reduz tamanho pra fotos
- PNG para WebP — otimiza pra web
- WebP para PNG — pra compatibilidade
SVG geralmente não vale a pena converter pra raster (você perde a vantagem da escala). Quando precisar, programas como Inkscape ou Adobe Illustrator fazem o trabalho.
Resumindo
Escolha pela natureza do conteúdo:
- Forma geométrica/logo/ícone? → SVG
- Captura de tela ou desenho? → PNG
- Foto ou cena real? → JPG (ou WebP, na web)
- Precisa de transparência? → PNG ou WebP
Acerte o formato uma vez e os problemas de qualidade, tamanho e nitidez somem.