WebP vs PNG vs JPG — Qual formato usar em cada situação?
Visão geral rápida
| Formato | Vantagens | Desvantagens | Transparência | Uso típico |
|---|---|---|---|---|
| WebP | Arquivos menores mantendo qualidade; suporta perdas e sem perdas. | Softwares muito antigos podem não suportar. | Sim | Fotos, banners, thumbnails, hero images. |
| PNG | Sem perdas; transparência perfeita; bordas nítidas. | Arquivos maiores em fotos. | Sim | Ícones, logos, UI, gráficos com texto fino. |
| JPG | Amplamente compatível; bom para fotos. | Sem transparência; perda de qualidade. | Não | Fotos comuns, compatibilidade ampla. |
Comparação prática (tamanho e qualidade)
Para a mesma foto de produto (1200px de largura):
- JPG 85%: boa nitidez; tamanho moderado.
- WebP 80–85%: geralmente 20–40% menor que o JPG com qualidade similar.
- PNG: peso alto para fotos; ideal para elementos com áreas chapadas e linhas nítidas.
Em ilustrações com traços finos, PNG ou WebP lossless preservam bordas. Para fotos, WebP com perdas costuma ser o melhor compromisso.
Quando usar cada formato
- Use WebP para a maioria das fotos do site/blog — velocidade e SEO agradecem.
- Use PNG para logos/ícones, screenshots com texto pequeno e quando precisar de transparência impecável.
- Use JPG quando precisar de compatibilidade máxima ou em fluxos antigos onde WebP não está disponível.
Fluxo recomendado
- Exporte a imagem no tamanho final (largura/altura usadas no site).
- Converta PNG/JPG → WebP para fotos e banners.
- Mantenha PNG para logos/ícones quando necessário.
- Teste a página e acompanhe Core Web Vitals (LCP, CLS).
FAQ
- Devo migrar todo meu site para WebP?
- Priorize páginas com mais tráfego e imagens pesadas. Migre por partes, medindo impacto em performance.
- WebP sem perdas substitui PNG?
- Em muitos casos sim, mas compare visualmente bordas e textos. PNG ainda é padrão em ícones de UI.
- Qual qualidade do WebP escolher?
- Comece em 80% para fotos. Para produtos detalhados, teste 85–90%. Para ícones, use lossless/PNG.