PNG, JPEG, WebP ou AVIF: que formato escolher?

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.

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.