PNG vs WebP vs AVIF｜Como escolher o formato de imagem e como converter
Um dos maiores fatores que afetam a velocidade de exibição de um site é a escolha do formato de imagem. A partir de 2026, as principais opções são <strong>PNG / JPEG / WebP / AVIF</strong>, totalizando 4 formatos. Este artigo organiza as características, usos e status de compatibilidade com navegadores de cada um, e explica como escolher o formato ideal.
Tabela de comparação de formatos
| Formato | Método de compressão | Transparência | Animação | Qualidade de imagem | Tamanho do arquivo | Compatibilidade com navegadores |
|---|---|---|---|---|---|---|
| PNG | Reversível (sem perdas) | ✅ | APNG | Máximo (sem degradação) | Grande | Todos os navegadores |
| JPEG | Com perdas (lossy) | ❌ | ❌ | Ajuste de qualidade disponível | Pequeno a médio | Todos os navegadores |
| WebP | Reversível / Irreversível | ✅ | ✅ | Melhor que JPEG | 25-35% menor que JPEG | 95%+ |
| AVIF | Com perdas / Sem perdas | ✅ | ✅ | Melhor que WebP | 20% menor que WebP | 92%+ |
Qual formato escolher
Casos para escolher PNG
- <strong>Logo, ícone, captura de tela</strong> e outros casos em que a degradação não é permitida
- Imagens contendo texto (fica difícil de ler quando desfocadas pela compressão)
- Quando transparência é necessária e compatibilidade com IE11 é necessária (quase desnecessário)
Casos para escolher JPEG
- Quando é necessária <strong>compatibilidade máxima</strong> com imagens que contêm muitas fotos e gradientes
- Ao entregar como anexo de email ou para dispositivos antigos
Casos para escolher WebP (Recomendado)
- <strong>Maioria das imagens de sites</strong> — 25〜35% menores em comparação com JPEG
- Transparência + Compressão simultâneas (alternativa a PNG)
- Animação (alternativa a GIF — muito menor)
- Taxa de compatibilidade 95%+, então praticamente sem problemas
Casos para escolher AVIF (vanguarda)
- <strong>Perseguindo o tamanho mínimo de arquivo</strong> — 20% menor que WebP
- Quando deseja manter fotos de alta qualidade, mas o mais leve possível
- Taxa de compatibilidade 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
Padrão de implementação: distribuição com elemento <code>picture</code>
O método mais robusto é especificar múltiplos formatos usando o elemento <code><picture></code>. O navegador seleciona a primeira fonte que suporta.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>Com esse método, navegadores compatíveis com AVIF carregam AVIF, navegadores que suportam apenas WebP carregam WebP, e navegadores que não suportam nenhum dos dois carregam JPEG.
Converter com ferramenta
<a href="/ja/tools/image-convert/">Ferramenta de Conversão de Formato de Imagem do DevLab</a> permite converter PNG ⇄ WebP ⇄ JPEG ⇄ AVIF apenas no navegador. Você pode converter enquanto verifica o equilíbrio entre tamanho de arquivo e qualidade com o controle deslizante de qualidade. Sem necessidade de upload para servidor, segurança de privacidade garantida.
Relacionado: <a href="/ja/tools/exif/">Visualizador EXIF</a> para verificar metadados de fotos e remover informações de localização, <a href="/ja/tools/image-base64/">Converter imagem → Base64</a> para gerar URLs de dados inline.
Resumo
- Em dúvida? <strong>WebP</strong> — melhor equilíbrio
- Se você quer torná-lo ainda menor, <strong>AVIF</strong> (com fallback no picture)
- Se sem perda, use <strong>PNG</strong>
- Se máxima compatibilidade for necessária, use <strong>JPEG</strong>