# PNG ou JPG: qual formato de imagem usar e quando

[Canonical HTML page](https://gradiently.design/pt-br/guide/png-vs-jpeg)

Um formato guarda cada pixel, o outro descarta detalhes para ficar leve. Saber qual detalhe se perde mostra qual escolher, sempre.

## The short version

- O PNG é sem perdas e preserva cada pixel exatamente, enquanto o JPG é com perdas e descarta detalhes que o olho tem menos chance de notar.
- Use PNG para texto, logotipos, capturas de tela, cor chapada e tudo o que precisa de fundo transparente.
- Use JPG para fotografias, onde a compressão quase não aparece e o arquivo fica várias vezes menor.
- O JPG não aceita transparência e costuma mostrar blocos e faixas em gradientes suaves e ao redor de letras nítidas.
- As redes sociais recomprimem todo upload, então partir de um PNG limpo ou de um JPG de alta qualidade dá menos o que estragar à compressão delas.

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.

| Propriedade | PNG | JPG (JPEG) |
| --- | --- | --- |
| Compressão | Sem perdas: nada é descartado | Com perdas: detalhes são descartados para economizar espaço |
| Transparência | Sim, com canal alfa completo | Não, áreas transparentes viram uma cor sólida |
| Melhor para | Texto, logotipos, capturas de tela, cor chapada, gradientes | Fotografias e designs com muitas fotos |
| Tamanho do arquivo | Maior para fotos, pequeno para gráficos chapados | Pequeno para fotos, ajustável pela qualidade |
| Salvar de novo | Seguro, sem perda a cada vez | Cada vez que salva, perde um pouco mais |
| Cor | Até 16 bits por canal, sRGB na web | 8 bits por canal, sRGB na web |

JPG e JPEG são o mesmo formato. A extensão de três letras é um resquício de sistemas de arquivos antigos.

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](https://gradiently.design/pt-br/guide/transparent-background).
- **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.

Um post vertical que diz Aberto até tarde às sextas, com texto nítido sobre um gradiente suave

Um post de texto sobre gradiente exportado em PNG: letras nítidas, sem faixas.

O mesmo post vertical, usado para mostrar onde surgem os artefatos de JPEG ao redor das letras e nas áreas escuras do gradiente

Salvo como JPG muito comprimido, é aqui que os artefatos aparecem primeiro: halos ao redor das letras e degraus nos cantos escuros.

## 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](https://gradiently.design/pt-br/guide/social-media-image-sizes).

- Post do Instagram 1080×1350: 1080 × 1350
- Stories 1080×1920: 1080 × 1920
- Post do X 1600×900: 1600 × 900
- Post do LinkedIn 1200×1200: 1200 × 1200

Exporte exatamente nesses tamanhos em pixels. Uma plataforma que precisa redimensionar a imagem recomprime com mais força.

| O que você vai publicar | Exportar como | Por quê |
| --- | --- | --- |
| Card de citação, aviso, slide de carrossel | PNG | Texto e cor chapada resistem melhor à recompressão |
| Fundo de gradiente ou material com palavras | PNG | Evita faixas nos tons escuros e sutis |
| Fotografia | JPG, qualidade 85 a 90 | Visualmente idêntico, bem menor |
| Logotipo para foto de perfil | PNG | Bordas limpas, e pode ser reutilizado com transparência |
| Imagem de link Open Graph | PNG ou JPG | PNG para texto, JPG para foto; mantenha abaixo de algumas centenas de KB |

## 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](https://gradiently.design/pt-br/guide/svg-vs-png) explica quando usar cada um, e [tamanhos de logotipo](https://gradiently.design/pt-br/guide/logo-sizes) 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](https://gradiently.design/pt-br/guide/gradient-banding), e é pior em fundos escuros e de baixo contraste.

Quase preto a violeta profundo: `linear-gradient(180deg, #0b0a14 0%, #1a1233 45%, #2e1a5c 100%)`

Uma mistura escura e sutil como esta é exatamente o que forma faixas no JPG. Exporte em PNG ou adicione um pouco de grão antes de exportar.

### Causa faixas

- JPG com qualidade 60 ou menos
- Salvar um JPG, editar e salvar de novo
- Um degradê digital perfeitamente limpo, sem textura
- Enviar um tamanho que a plataforma precisa redimensionar

### Evita as faixas

- PNG para qualquer coisa com gradiente
- JPG com 90 ou mais, se tiver que usar JPG
- Uma camada leve de grão, que quebra os degraus
- Exportar no tamanho exato em pixels da plataforma

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](https://gradiently.design/pt-br/guide/grainy-gradients) 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](https://gradiently.design/pt-br/guide/webp-images) antes de refazer as imagens do seu site. Para os ajustes em si, veja [compressão de imagem sem estragar gradientes](https://gradiently.design/pt-br/guide/image-compression).

## FAQ

### O PNG tem qualidade melhor que o JPG?

O PNG é sem perdas, então nunca perde qualidade, por mais que você salve. Em fotografias, um JPG de alta qualidade parece igual ao olho e é bem menor, então o melhor depende do conteúdo.

### Devo postar PNG ou JPG no Instagram?

PNG para texto, gráficos e gradientes, JPG com qualidade 85 ou mais para fotos. O Instagram recomprime os dois, então exporte no tamanho exato que ele espera, como 1080×1350 para um post vertical.

### O JPG aceita fundo transparente?

Não. O JPG não tem canal alfa, então áreas transparentes são preenchidas com uma cor sólida, geralmente branco. Use PNG, WebP ou SVG para transparência.

### Por que meu gradiente fica listrado depois de salvar em JPG?

A compressão JPG junta cores parecidas em misturas suaves e forma faixas visíveis. Exporte o design em PNG, suba a qualidade do JPG para 90 ou mais, ou adicione uma camada leve de grão.

### JPEG é o mesmo que JPG?

Sim. São o mesmo formato; JPG é só a versão de três letras da extensão.