Formatos de Imagem Explicados: PNG, JPEG, WebP, SVG & AVIF

31 de março de 2026 · 12 min de leitura

Escolher o formato de imagem certo pode impactar drasticamente o desempenho do seu site, a qualidade visual e a experiência do usuário. Com formatos modernos como AVIF e WebP ganhando força ao lado de padrões estabelecidos como JPEG e PNG, entender quando usar cada formato nunca foi tão importante.

Este guia abrangente detalha as especificações técnicas, casos de uso práticos e características de desempenho de todos os principais formatos de imagem usados na web hoje. Seja você otimizando um site de alto tráfego ou apenas querendo entender por que suas imagens ficam borradas, você encontrará insights acionáveis aqui.

Comparação Completa de Formatos

Antes de mergulhar nos formatos individuais, aqui está uma visão geral abrangente de como cada formato se compara em critérios-chave. Esta tabela ajudará você a identificar rapidamente qual formato atende às suas necessidades específicas.

JPEG: O Padrão para Fotografia

JPEG (Joint Photographic Experts Group) tem sido o formato dominante para imagens fotográficas desde 1992. Seu algoritmo de compressão com perdas é especificamente otimizado para imagens de tom contínuo onde o olho humano é menos sensível a pequenas variações de cor.

Como Funciona a Compressão JPEG

JPEG usa uma técnica chamada transformada discreta de cosseno (DCT) para converter dados espaciais da imagem em dados de frequência. Em seguida, descarta informações de alta frequência que os humanos percebem com menos precisão, alcançando redução significativa no tamanho do arquivo mantendo a qualidade visual.

O formato se destaca em fotografias, pinturas e cenas naturais complexas, mas tem dificuldades com bordas nítidas, texto e áreas de cor plana onde os artefatos de compressão se tornam altamente visíveis.

Níveis de Qualidade JPEG Explicados

Entender as configurações de qualidade é crucial para equilibrar tamanho de arquivo e fidelidade visual:

• Qualidade 95-100: Compressão mínima, arquivos muito grandes. Use apenas para fins de arquivo ou quando o tamanho do arquivo for irrelevante. Visualmente indistinguível do original na maioria dos casos.
• Qualidade 85-95: Visualmente sem perdas para a maioria das fotografias. Este é o ponto ideal para imagens web de alta qualidade onde a qualidade importa mais que o tamanho do arquivo.
• Qualidade 70-85: Excelente equilíbrio para uso web. Produz imagens de boa qualidade em tamanhos de arquivo razoáveis. A maioria dos sites deve mirar nesta faixa.
• Qualidade 50-70: Artefatos perceptíveis aparecem, especialmente em áreas detalhadas. Aceitável para miniaturas ou quando a largura de banda é severamente limitada.
• Qualidade abaixo de 50: Degradação significativa da qualidade. Use apenas para miniaturas pequenas ou restrições extremas de largura de banda.

JPEG Progressivo vs. Baseline

JPEGs progressivos carregam em múltiplas passagens, começando com uma versão de baixa resolução que gradualmente fica mais nítida. JPEGs baseline carregam de cima para baixo em uma única passagem.

Vantagens do JPEG Progressivo:

• Melhor desempenho percebido—usuários veem algo imediatamente
• Frequentemente 2-10% menor em tamanho de arquivo para imagens acima de 10KB
• Experiência do usuário melhorada em conexões lentas

Quando usar Baseline:

• Imagens muito pequenas (abaixo de 10KB) onde a codificação progressiva adiciona sobrecarga
• Ao direcionar dispositivos muito antigos com poder de processamento limitado
• Anexos de e-mail onde alguns clientes não lidam bem com progressivo

Quando NÃO Usar JPEG

JPEG é a escolha errada para:

• Capturas de tela com texto (use PNG)
• Imagens que requerem transparência (use PNG ou WebP)
• Arte linear, diagramas ou ilustrações (use SVG ou PNG)
• Imagens que serão editadas várias vezes (a qualidade degrada a cada salvamento)
• Imagens com grandes áreas de cor sólida (artefatos de compressão são muito visíveis)

PNG: Precisão Sem Perdas

PNG (Portable Network Graphics) foi criado em 1996 como uma substituição livre de patentes para GIF. Usa compressão sem perdas, o que significa que cada pixel é preservado exatamente como estava na imagem original—não importa quantas vezes você salve.

Profundidades de Cor PNG

PNG suporta múltiplas profundidades de cor, cada uma adequada para diferentes casos de uso:

• PNG-8: Máximo de 256 cores (8-bit), similar ao GIF mas com melhor compressão. Ideal para gráficos simples, ícones e imagens com paletas de cores limitadas. Tamanhos de arquivo são tipicamente 30-50% menores que GIFs equivalentes.
• PNG-24: 16,7 milhões de cores (24-bit), cor RGB completa. Perfeito para gráficos complexos sem transparência. Significativamente maior que PNG-8 mas mantém qualidade perfeita.
• PNG-32: Cor 24-bit mais canal alfa de 8-bit (transparência). Isto é o que a maioria das pessoas quer dizer quando fala "PNG". Suporta 256 níveis de transparência por pixel, permitindo bordas suaves e efeitos semi-transparentes.

Transparência Alfa Explicada

O canal alfa do PNG é sua característica matadora. Diferente da transparência binária do GIF (um pixel é totalmente transparente ou totalmente opaco), PNG suporta 256 níveis de transparência por pixel.

Isso permite:

• Bordas suaves com anti-aliasing que se misturam perfeitamente com qualquer fundo
• Sobreposições e efeitos semi-transparentes
• Sombras e brilhos que parecem naturais em qualquer cor de fundo
• Efeitos complexos de composição e camadas

Níveis de Compressão PNG

A compressão PNG é sem perdas mas ajustável. Níveis mais altos de compressão levam mais tempo para codificar mas produzem arquivos menores com qualidade visual idêntica:

• Nível 0: Sem compressão (mais rápido, arquivos maiores)
• Nível 1-3: Compressão rápida, tamanhos de arquivo moderados
• Nível 6: Padrão na maioria das ferramentas, bom equilíbrio
• Nível 9: Compressão máxima (mais lento, arquivos menores)

Para uso web, sempre use compressão nível 9. A diferença no tempo de codificação é insignificante para imagens individuais, e a economia no tamanho do arquivo é substancial.

Quando Usar PNG

PNG é a melhor escolha para:

• Capturas de tela e gravações de tela
• Gráficos com texto ou bordas nítidas
• Logos e ativos de marca (quando SVG não é adequado)
• Imagens que requerem transparência
• Imagens que serão editadas várias vezes
• Gráficos com cores planas ou gradientes
• Cópias mestres de qualquer imagem antes da compressão JPEG

Considerações sobre Tamanho de Arquivo PNG

Arquivos PNG podem ser 5-10x maiores que JPEGs equivalentes para conteúdo fotográfico. Um JPEG de 2MB pode se tornar um PNG de 15MB. Isso torna PNG inadequado para galerias de fotos ou imagens hero, a menos que você esteja usando formatos modernos como WebP ou AVIF como alternativas.

WebP: O Formato Universal do Google

WebP, desenvolvido pelo Google e lançado em 2010, foi projetado para substituir tanto JPEG quanto PNG com um único formato que oferece compressão superior para imagens com e sem perdas, além de suporte para transparência e animação.

Desempenho de Compressão WebP

WebP oferece reduções impressionantes no tamanho de arquivo comparado aos formatos legados:

WebP Com Perdas vs. Sem Perdas

WebP suporta ambos os modos de compressão, e você