Melhores Formatos de Imagem para a Web: JPEG, PNG, WebP, AVIF, SVG
Escolher o formato de imagem certo para a web é uma das decisões de desempenho mais impactantes que você pode tomar. Este guia compara JPEG, PNG, WebP, AVIF e SVG para ajudá-lo a tomar a decisão certa.
Comparação de formatos
| Formato | Tipo | Transparência | Animação | Suporte | Melhor para |
|---|---|---|---|---|---|
| JPEG | Com perdas | ❌ | ❌ | 100% | Fotografias, e-mail |
| PNG | Sem perdas | ✅ | ❌ (APNG sim) | 100% | Capturas de tela, logos, transparência |
| WebP | Com/sem perdas | ✅ | ✅ | 95%+ | Imagens web modernas, substituto JPEG/PNG |
| AVIF | Com/sem perdas | ✅ | ✅ | ~80% | Melhor compressão, imagens CDN |
| SVG | Vetorial | ✅ | ✅ (CSS/JS) | 100% | Ícones, logos, ilustrações, gráficos |
JPEG — Para fotografias
JPEG é ideal quando você precisa de fotos com tamanho de arquivo pequeno e compatibilidade universal. Use o JPEGMinify com MozJPEG para obter arquivos 10–15% menores que ferramentas padrão.
- Qualidade 70–85% oferece melhor relação tamanho/qualidade
- JPEG progressivo melhora a percepção de velocidade
- Sem suporte a transparência — use PNG ou WebP para isso
PNG — Para transparência e capturas de tela
PNG é sem perdas — preserva cada pixel exatamente. É a escolha certa para logos em fundo transparente, capturas de tela de UI e imagens com texto nítido.
- PNG-24 para transparência total; PNG-8 para cores limitadas
- Tamanhos muito maiores que JPEG para fotos — use JPEG/WebP em vez disso
WebP — O formato moderno para web
WebP combina o melhor de JPEG e PNG: compressão com perdas e sem perdas, suporte a transparência e animação. Tipicamente 25–35% menor que JPEG na mesma qualidade visual.
- Suportado por todos os navegadores modernos (Chrome, Firefox, Edge, Safari 14+)
- Use com fallback JPEG via elemento
<picture> - Indisponível na maioria dos clientes de e-mail — use JPEG para e-mail
AVIF — Máxima compressão
AVIF oferece os menores tamanhos de arquivo de qualquer formato mainstream (40–55% menor que JPEG), mas suporte ainda está amadurecendo e a codificação é muito mais lenta.
- Melhor para imagens de alto tráfego entregues por CDN
- Use com fallbacks WebP e JPEG
- Não use para e-mail ou sistemas legados
SVG — Para gráficos vetoriais
SVG é código XML — infinitamente escalável sem perda de qualidade. Perfeito para logos, ícones e qualquer arte vetorial que precisa ser exibida em tamanhos diferentes.
- Minifique SVGs para remover espaços em branco e metadados desnecessários
- Não use para fotografias — tamanhos de arquivo enormes