WebP vs AVIF vs PNG vs JPEG Escolhendo formatos de imagem para o web

Escolher o formato de imagem errado é um dos responsáveis por desempenho ruim. Um PNG onde deveria estar um JPEG aumenta o peso da página em 3 a 5 vezes. Servir um JPEG em 2025 quando o WebP faria o mesmo trabalho com 30% menos tamanho é um desperdício de banda. As decisões não são complicadas — basta ter um mapa claro.

Aqui está como cada formato funciona, quando usá-lo e como converter entre eles usando um conversor de formato de imagem ou ferramentas de linha de comando.

JPEG

O JPEG foi o formato padrão para fotografias desde os anos 1990 e ainda mantém essa posição. Utiliza compressão perda: alguns dados da imagem são descartados durante a codificação, mas em níveis de qualidade de 75 a 85, a diferença é invisível para o olho humano. O JPEG não suporta transparência.

Melhor para: Fotos, imagens de produtos, ilustrações com gradientes complexos, qualquer conteúdo fotográfico sem necessidade de transparência.

Evitar quando: Você precisa de fundo transparente ou a imagem contém texto e bordas claras onde artefatos de compressão se tornam visíveis.

png

O PNG utiliza compressão sem perda — cada pixel é preservado exatamente como codificado. Suporta um canal alfa completo, o que o torna a escolha ideal para qualquer coisa que exija transparência: logotipos, capturas de tela, ícones, sobreposições e imagens com texto.

O custo é o tamanho do arquivo. O PNG é geralmente 2 a 5 vezes maior que um JPEG equivalente para conteúdo fotográfico. O erro mais comum: salvar uma foto como PNG porque “parece melhor”. Isso não é verdade — ela simplesmente ainda não foi comprimida. Se sua foto não precisa de transparência, o PNG é o formato errado.

Melhor para: Capturas de tela, ativos de interface, logotipos, ícones, imagens com texto, qualquer coisa que exija transparência.

Evitar quando: Servir uma foto que não exige transparência.

WebP

O WebP foi lançado pela Google em 2010 e já atinge suporte quase universal em navegadores (97%+ em 2025). Suporta compressão perda e sem perda, transparência completa e animação — essencialmente um superset das capacidades do JPEG e PNG em um único formato.

A compressão é cerca de 25 a 35% melhor que o JPEG em qualidade visual equivalente. Para uso sem perda, os arquivos WebP são consistentemente menores que o PNG. Não há mais uma razão significativa para evitar o WebP em sites modernos.

Melhor para: Substituto universal para o JPEG e o PNG. Fotos, ativos de interface, qualquer lugar onde anteriormente você teria usado os formatos antigos.

AVIF

O AVIF é derivado do codec de vídeo AV1 e oferece a melhor compressão entre todos os formatos de imagem web mainstream — geralmente 20 a 50% menor que o WebP em qualidade visual equivalente. Suporta cor HDR, gama de cor ampla e transparência com canal alfa.

O suporte em navegadores está em torno de 93% globalmente. A principal dificuldade é a velocidade de codificação: a codificação AVIF é significativamente mais lenta que o WebP, embora as ferramentas estejam melhorando rapidamente. Para a maioria dos fluxos de trabalho produtivos, você gera AVIF fora do ar e o serve estático — o tempo de codificação não afeta o carregamento da página.

Melhor para: Fotos de alta qualidade, imagens de destaque, qualquer lugar onde os benefícios da compressão superem o tempo de codificação offline.

GIF, SVG e os outros

GIF é funcionalmente obsoleto. Seu limite de 256 cores e compressão ruim o torna inadequado para animações e inútil para fotografias. O WebP animado, animação com CSS e <video> produzem resultados melhores em tamanhos menores. Não use GIF em trabalhos novos.

SVG não é um formato raster — é markup XML que descreve formas vetoriais. Use-o para ícones, logotipos e ilustrações lineares que precisam escalar com clareza em qualquer tamanho sem desfocar. Não é adequado para fotografias ou imagens fotorealistas.

Comparação de formatos em resumo

Formatar	Com perdas	Transparência	Suporte ao navegador	Melhor para	Tamanho do arquivo vs JPEG
JPEG	Sim	Não	100%	Fotos, gradientes	Base
png	Não	Sim	100%	Capturas de tela, ativos de interface, ícones	2 a 5 vezes maior
WebP	Ambos	Sim	97%+	Substituto moderno universal	aproximadamente 30% menor
AVIF	Ambos	Sim	93%+	Fotos de alta qualidade	aproximadamente 45% menor
GIF	Não	Sim (1 bit)	100%	Animação legada apenas	Evitar
SVG	N / D	Sim	100%	Ícones, logotipos, ilustrações	N / D

Como converter entre formatos

A forma mais rápida de converter imagens sem instalar nada: o IO Tools Image Converter trata JPEG, PNG, WebP, AVIF, GIF e mais — faça o upload do seu arquivo, escolha o formato de saída e baixe. Funciona inteiramente no navegador para formatos suportados no cliente, e utiliza processamento no servidor para AVIF.

Para processamento em lote ou pipelines de build, ffmpeg e ImageMagick são as ferramentas padrão:

# Convert to WebP (ffmpeg)
ffmpeg -i input.jpg -quality 85 output.webp

# Convert to AVIF (ffmpeg)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

# Convert to WebP (ImageMagick)
convert input.png -quality 85 output.webp

# Batch convert all JPEGs to WebP
for f in *.jpg; do convert "$f" -quality 85 "${f%.jpg}.webp"; done

Após converter, você pode reduzir o tamanho do arquivo com o IO Tools Image Compressor — útil para tirar mais bytes antes da implantação sem outra conversão.

Servir formatos modernos com fallback

O <picture> permite servir AVIF e WebP para navegadores com suporte, enquanto cai para JPEG em navegadores antigos. O navegador escolhe o primeiro <source> formato que suporta:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Isso dá você a compressão máxima onde é suportada sem quebrar a compatibilidade. AVIF para navegadores que o suportam, WebP como segunda escolha, JPEG como fallback garantido. O <img> é o que é indexado por motores de busca e lido por leitores de tela — preencha o alt texto de acordo.

A decisão em resumo

• Foto sem transparência → WebP (ou AVIF + WebP com fallback se você estiver otimizando fortemente)
• Fundo transparente → WebP (PNG se a compatibilidade máxima for necessária)
• Logotipo, ícone, ilustração → SVG
• Captura de tela ou diagrama de interface → PNG
• Compatibilidade máxima com navegadores → JPEG + PNG
• Desempenho máximo → AVIF + WebP com fallback via <picture>

A resposta curta: use o WebP para fotos e ativos de interface, SVG para qualquer coisa vetorial. Adicione AVIF quando o desempenho for crítico. Use JPEG e PNG quando houver uma razão específica — não como escolhas padrão. <source> 8 de maio de 2026

Você também pode gostar