PNG ou JPG: qual formato de imagem usar e quando

A resposta curta para PNG ou JPG: use PNG para qualquer coisa com texto, logotipos, cor chapada, bordas nítidas ou fundo transparente, e use JPG para fotografias. O PNG é sem perdas, então cada pixel exportado é o pixel que chega. O JPG é com perdas: joga fora detalhes para deixar o arquivo pequeno, e esses detalhes são justamente o que deixa as letras nítidas e os gradientes suaves. Uma foto disfarça essa perda muito bem. Um título sobre um gradiente, não.

A diferença entre PNG e JPG

Os dois formatos guardam uma grade de pixels, então nenhum amplia sem perder nitidez. O que os separa é como espremem essa grade em um arquivo.

O JPG funciona dividindo a imagem em pequenos quadrados de 8×8 pixels e simplificando a cor e os detalhes finos dentro de cada um. Numa foto cheia de textura, essa simplificação some no ruído. Num gradiente suave ou na borda de uma letra, ela aparece como blocos leves, halos borrados e faixas de cor em degraus.

Quando usar PNG

• Gráficos com muito texto: cards de citação, avisos, carrosséis, slides.
• Logotipos e ícones, principalmente sobre um fundo transparente.
• Capturas de tela de interfaces, onde o JPG borra o texto pequeno.
• Gradientes e cor chapada, que formam faixas e blocos sob a compressão do JPG.
• Arquivos mestres que você vai editar de novo, para não perder qualidade a cada salvamento.

Quando usar JPG

Use JPG para fotografias: fotos de produto, retratos, viagens, comida. Fotos reais são cheias de grão e textura, que disfarçam a compressão, e um JPG com qualidade em torno de 80 a 85 costuma ficar idêntico ao original com uma fração do tamanho. Uma foto em PNG grande pode ser facilmente várias vezes mais pesada sem ganho visível.

O JPG também serve para designs que são quase só foto com um pouco de texto, desde que o texto seja grande. Se o texto for pequeno ou fino, ou ficar sobre um céu liso, exporte em PNG, ou teste os dois e compare com zoom de 100%.

PNG ou JPG para redes sociais

Instagram, Facebook, X e LinkedIn recomprimem tudo o que você envia, geralmente para JPG. Parece motivo para não se importar, mas é o contrário: a compressão se acumula. Um JPG que já foi espremido é espremido de novo, e os artefatos dobram. Entregue à plataforma o arquivo mais limpo possível, no tamanho exato que ela espera, para que não precise redimensionar nada. Os tamanhos estão em tamanhos de imagem para redes sociais.

PNG ou JPG para logotipo

PNG, sempre, se você precisa de um arquivo de pixels. Um logotipo é feito de formas chapadas e bordas duras, que o PNG comprime bem e o JPG danifica, e quase sempre precisa de fundo transparente para ficar sobre fotos, cores e modo escuro. Melhor ainda: guarde o arquivo mestre em SVG, que continua nítido em qualquer tamanho. SVG ou PNG explica quando usar cada um, e tamanhos de logotipo lista os arquivos de que você precisa.

Por que gradientes formam faixas no JPG

Gradientes suaves são o teste mais difícil para qualquer formato. Uma mistura escura de quase preto a violeta profundo tem só algumas dezenas de valores de cor distintos, e a compressão JPG junta os vizinhos em listras visíveis. Isso é o banding em gradientes, e é pior em fundos escuros e de baixo contraste.

O grão ajuda mais do que qualquer configuração, porque dá ao compressor textura para trabalhar em vez de uma sequência chapada de cores quase idênticas. Gradientes com grão mostra quanto é suficiente. Os Marks do Gradiently trazem o próprio grão e a própria luz, que é justamente a textura que ajuda um design com gradiente a sobreviver à recompressão de uma plataforma.

E o WebP e o AVIF?

No seu próprio site, os formatos mais novos vencem os dois: WebP e AVIF podem ser com ou sem perdas, aceitam transparência e ficam menores com a mesma qualidade. Todos os navegadores atuais aceitam WebP. Deixe PNG e JPG para uploads em plataformas e para compartilhar arquivos, e leia WebP ou PNG e JPG antes de refazer as imagens do seu site. Para os ajustes em si, veja compressão de imagem sem estragar gradientes.