PNG vs JPG: quando usar cada um

Resumo. Use PNG para capturas de tela, logos e qualquer coisa com bordas nítidas ou transparência, pois é sem perdas e suporta canal alpha. Use JPG para fotografias, pois sua compressão DCT com perdas produz arquivos 5-10 vezes menores sem perda de qualidade perceptível.

Dois formatos de imagem, ambos com mais de 30 anos, ambos ainda onipresentes, ambos corretos em situações diferentes. A regra prática é simples: PNG para capturas de tela, logos, qualquer coisa com bordas nítidas ou transparência; JPG para fotografias. O raciocínio por trás dessa regra é mais interessante do que a própria regra.

As principais diferenças

Por que a compressão com perdas vence para fotografias

O algoritmo de compressão do JPG — a transformada discreta do cosseno (DCT), seguida de subamostragem de croma e codificação Huffman — é projetado em torno do sistema visual humano. O algoritmo descarta informações que o olho não consegue ver facilmente:

• Subamostragem de croma. A visão humana é muito mais sensível ao brilho (luma) do que à cor (croma). JPG armazena a cor na metade da resolução do brilho, o que é invisível na visualização normal.
• Quantização no domínio da frequência. As fotografias contêm muito ruído de alta frequência (gradientes sutis, textura, grão do sensor). O DCT separa a imagem em bandas de frequência; o JPG quantiza agressivamente as bandas de alta frequência. Você perde detalhes que não estava conscientemente vendo de qualquer forma.

Para uma foto 4K, o JPG na qualidade 85 parece indistinguível do original sem perdas para a maioria dos visualizadores, com um décimo do tamanho de arquivo. Essa proporção é imbatível.

Por que a compressão com perdas falha para capturas de tela e logos

Regiões planas e bordas nítidas são exatamente o tipo errado de conteúdo para a matemática de domínio de frequência do JPG. O algoritmo introduz artefatos de toque em bordas duras (visíveis como halos sutis perto de texto), e a subamostragem de croma que se esconde bem em uma fotografia torna-se mancha de mudança de cor óbvia ao lado de uma cor de marca saturada.

A compressão DEFLATE do PNG, por outro lado, é exata. Uma cor de 24 bits é armazenada como uma cor de 24 bits. Regiões planas comprimem muito bem porque a codificação de comprimento de execução detecta a repetição; bordas nítidas permanecem nítidas. Uma captura de tela típica de UI em PNG é menor do que a mesma captura salva como JPG.

A questão da transparência

JPG não tem canal alpha. Um “JPG transparente” não existe; o formato simplesmente não consegue armazenar um. Se você precisa de algo sobre um fundo não retangular — logos, ícones, recortes estilo adesivo, qualquer coisa em camadas — PNG é o único dos dois que funciona.

A solução alternativa que as pessoas às vezes tentam é corresponder o fundo do JPG à cor de fundo do destino. Isso funciona para um destino específico e quebra no momento em que o asset é reutilizado. Não faça isso. Use PNG ou, melhor, um formato vetorial como SVG.

Quando nem PNG nem JPG é a resposta certa

Três casos:

1. Gráficos vetoriais. Logos, ícones, ilustrações devem ser entregues como SVGquando possível. Vetores escalam para qualquer resolução, permanecem nítidos em qualquer display e geralmente comprimem para algumas centenas de bytes. PNG te prende a uma resolução.
2. Fotografias web modernas. Use WebP (ou AVIF onde suportado). Ambos os formatos produzem arquivos 25-50% menores que JPG com qualidade visual equivalente, e ambos suportam alpha. Nosso conversor de JPG para WebP e conversor de PNG para WebP fazem a troca no navegador. Use JPG como fallback com <picture> para a pequena parcela de clientes que não suportam WebP.
3. Imagens UI inline. Às vezes, a resposta certa é pular um arquivo separado. Nossa ferramenta de imagem para Base64 codifica qualquer imagem como um data URI que você pode colar diretamente em HTML, CSS ou JSON. Útil quando a imagem é pequena (menos de ~10 KB) e uma requisição HTTP separada atrasaria o caminho de renderização crítico.

A árvore de decisão

1. Precisa de transparência? → PNG (ou SVG se vetorial).
2. É uma fotografia ou similar? → JPG, ou WebP para a web.
3. É uma captura de tela, captura de UI ou gráfico de cor plana? → PNG.
4. Tem menos de 10 KB e é usado uma vez? → Base64 inline.
5. É um logo ou ícone? → SVG. PNG como fallback.

Isso cobre cerca de 95% dos casos. Os 5% restantes geralmente são resolvidos tentando ambos os formatos e comparando tamanhos de arquivo — nenhum algoritmo é mágico, e a resposta certa depende do conteúdo específico.

Dados numéricos

• Dimensões máximas: PNG até 2³¹−1 × 2³¹−1 px (teórico); JPG limitado a 65.535 × 65.535 px (campo de 16 bits).
• Profundidade de bit: PNG suporta 1/2/4/8/16 bits por canal + alpha; JPG é fixo em 8 bits por canal, 3 canais (sem alpha).
• Vantagem de profundidade de cor: PNG 16 bits = 281 trilhões de cores vs 16,7 milhões do JPG — relevante apenas para fontes HDR e trabalho com degradação de gradiente.
• Proporção típica de tamanho de arquivo (foto 4K, qualidade 85): PNG ~12 MB vs JPG ~1,5 MB — cerca de 8×.
• Proporção típica de tamanho (captura de tela de UI, cor plana): PNG ~80 KB vs JPG ~180 KB — PNG cerca de 2× menor.
• Qualidade JPG vs perceptual: q=95 é visualmente sem perdas na maioria do conteúdo; q=80 é o ponto ideal para web; q=60 começa a mostrar artefatos em rostos e gradientes.
• Subamostragem de croma 4:2:0: armazena croma em quarto da resolução, economizando ~50% do tamanho com impacto perceptual mínimo em fotos, mas toque visível em texto.
• Níveis de compressão PNG: 0-9 no libpng; nível 9 produz arquivos ~5-15% menores que nível 6, mas leva ~3-5× mais tempo. oxipng e zopflipng podem reduzir outros 10-20%.
• Perda de geração: JPG ressalvo 10 vezes com q=85 perde ~3 dB PSNR vs o original; PNG é sem perdas, então perda de geração = 0.
• Tamanho de APNG vs GIF: tipicamente 50-70% menor que GIF equivalente com maior profundidade de cor.

Matriz de decisão

Fontes

• W3C / ISO 15948 — Portable Network Graphics (PNG) Specification, Third Edition — w3.org/TR/png.
• ITU-T T.81 (ISO/IEC 10918-1) — Information technology – Digital compression and coding of continuous-tone still images (especificação central JPEG) — itu.int.
• Wallace, G.K. — The JPEG Still Picture Compression Standard, Communications of the ACM, abril de 1991 — artigo JPEG original revisado por pares.