Escolher um formato para a Web exige equilibrar fotografia, transparência, texto, compatibilidade, peso e qualidade. Não existe um formato universalmente melhor: existe o mais adequado ao conteúdo e ao uso.
GuiaFormatosIniciante
PNG, JPEG, WebP ou AVIF: que formato escolher?
Escolha o formato adequado para fotografia, captura, transparência ou interface sem sacrificar desnecessariamente qualidade e desempenho.
Mostrar índice
Escolha rápida
| Conteúdo | Primeiro formato a testar | Alternativa |
|---|---|---|
| Fotografia | AVIF ou WebP | JPEG |
| Captura / interface | WebP ou PNG | AVIF |
| Transparência | WebP, AVIF ou PNG | conforme compatibilidade |
| Logótipo / ícone geométrico | SVG | PNG se raster obrigatório |
| Ilustração raster | WebP / AVIF | PNG ou JPEG |
Formato, resolução e compressão
São três decisões distintas. Redimensionar decide quantos píxeis são necessários; o formato decide como são representados; a qualidade decide o compromisso de compressão.
Uma boa otimização combina as três.
JPEG
JPEG continua muito eficiente para fotografias com muitas tonalidades, transições e texturas. Usa compressão com perdas e tem compatibilidade enorme.
É menos adequado para texto nítido, gráficos planos, contornos fortes e transparência. Com compressão elevada podem surgir blocos, halos e perda de detalhe.
PNG
PNG usa normalmente compressão sem perdas e é adequado a capturas de ecrã, gráficos planos, transparência e situações em que os píxeis codificados devem ser preservados exatamente.
Em fotografias grandes pode ser muito mais pesado do que JPEG, WebP ou AVIF.
O canal alfa permite sombras, bordos suavizados e fundos transparentes.
WebP
WebP combina modos com e sem perdas, transparência e animação. Tornou-se um formato geral muito útil na Web.
Uma fotografia JPEG pode muitas vezes ficar menor em WebP com qualidade visual semelhante; alguns PNG podem ser substituídos por WebP lossless. O resultado depende da imagem e do encoder: teste sempre o ficheiro real.
AVIF
AVIF pode oferecer compressão muito eficiente, sobretudo em fotografias. Suporta transparência e funcionalidades modernas como maior profundidade e HDR em cadeias compatíveis.
O encoding pode ser mais pesado e nem sempre a redução compensa a complexidade. Compare tamanho, aparência e custo de produção.
E SVG?
Logótipos, ícones e diagramas geométricos são frequentemente melhor representados como vetores. SVG escala sem ficar desfocado e pode ser mais lógico que um raster.
Comparar corretamente
Compare formatos a partir do mesmo master e das mesmas dimensões. Não atribua ao codec um ganho obtido também por redução de resolução.
Avalie:
- tamanho;
- qualidade no tamanho real de uso;
- transparência;
- compatibilidade;
- custo de encoding;
- simplicidade da pipeline.
Fallback e <picture>
Quando precisa de oferecer vários formatos, o elemento <picture> permite ao navegador escolher uma fonte suportada. Pode servir AVIF, depois WebP e finalmente um fallback tradicional.
Não é obrigatório multiplicar formatos. Se WebP já resolve qualidade, compatibilidade e peso, uma cadeia mais simples pode ser melhor.
Regra prática
- fotografia: teste AVIF/WebP e compare com JPEG;
- captura: WebP lossless ou PNG;
- transparência: WebP/AVIF/PNG;
- logótipo geométrico: SVG;
- arquivo: preserve sempre o master original.
A melhor escolha é a validada sobre o conteúdo real, não a declarada “mais moderna” em abstrato.
Este artigo foi útil?
Fontes e referências
- MDN — Image file type and format guide (abre num novo separador)Página em inglês
- Google — An image format for the Web (abre num novo separador)Página em inglês