# Compressão de imagem sem estragar os gradientes

[Canonical HTML page](https://gradiently.design/pt-br/guide/image-compression)

Fotos aguentam compressão pesada. Gradientes, não. Veja por que uma transição suave vira listras e os ajustes exatos que a mantêm suave enquanto o arquivo continua pequeno.

## The short version

- A compressão de imagem deixa os arquivos menores sem perdas, guardando os mesmos pixels de forma mais eficiente, ou com perdas, descartando detalhes.
- Gradientes suaves são os que mais sofrem com a compressão com perdas, porque cores vizinhas se fundem em faixas e blocos visíveis.
- Gradientes escuros e sutis formam faixas primeiro, já que uma imagem de 8 bits tem pouquíssimos valores distintos entre duas cores escuras próximas.
- Uma camada leve de granulado ou pontilhamento esconde as faixas melhor que qualquer ajuste de qualidade, porque quebra os degraus.
- Para artes com gradientes, exporte em PNG ou WebP sem perdas, ou use JPG com qualidade 90 ou mais e a subamostragem de croma desligada.

A **compressão de imagem** deixa um arquivo menor de dois jeitos. A compressão sem perdas guarda exatamente os mesmos pixels de forma mais eficiente, como zipar um documento. A compressão com perdas joga fora detalhes que ela prevê que você não vai notar. Fotografias escondem bem essa perda porque são cheias de textura. Gradientes suaves não escondem nada: comprima demais uma transição suave e ela se quebra em listras, manchas e blocos. A solução é uma mistura do formato certo, do ajuste de qualidade certo e de um pouco de granulado.

## Por que os gradientes quebram quando você comprime

Uma imagem comum guarda 256 níveis para cada canal: vermelho, verde e azul. Parece muito até você olhar para uma transição escura e sutil. Indo de `#14101f` a `#2a2147` numa hero de 1920 pixels de largura, o canal vermelho sobe só 22 níveis. Cada nível precisa se esticar por cerca de 87 pixels, então você já está a um passo de faixas visíveis antes de qualquer compressão.

Uma transição com pouquíssimos degraus: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)`

Cores escuras próximas numa área larga: o risco clássico de faixas. Numa boa tela, talvez você já veja degraus verticais discretos aqui.

A compressão com perdas então simplifica a imagem em pequenos blocos e funde cores quase iguais. Numa foto, pixels vizinhos raramente são iguais, então pouco muda. Num gradiente, quase todo vizinho é quase igual, então trechos inteiros de cor viram uma só. Isso é o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding), e transições escuras e em tons pastel são as que mais mostram.

### Forma faixas fácil

- Transições escuras entre cores próximas
- Tons pastel claros numa área grande
- Superfícies digitais perfeitamente lisas
- Formatos largos, como uma hero de 1920×1080

### Aguenta bem

- Transições vivas com paradas de cor distantes
- Gradientes com granulado ou textura
- Fotos e ilustrações cheias de detalhes
- Imagens pequenas com trechos de cor curtos

## Os ajustes de qualidade que importam

Cada formato tem um controle principal e alguns escondidos. Estes pontos de partida são conservadores para artes com gradientes e texto; fotos geralmente podem ir mais baixo. Sempre avalie com zoom de 100% numa boa tela, nunca numa miniatura.

| Formato | Ajuste para artes com gradiente | Ajuste para fotos | Observações |
| --- | --- | --- | --- |
| PNG | Sem perdas, cor completa | Raramente a melhor escolha | Evite reduzir para 256 cores em gradientes |
| JPG | Qualidade 90 a 95, subamostragem desligada (4:4:4) | Qualidade 80 a 85 | Nunca edite e salve um JPG várias vezes |
| WebP | Sem perdas, ou com perdas 85 a 90 | Com perdas 75 a 80 | O melhor padrão para o seu próprio site |
| AVIF | Com perdas em qualidade alta, teste com cuidado | Qualidade média | Arquivos menores, codificação mais lenta |

Os números de qualidade não são comparáveis entre formatos nem mesmo entre ferramentas, então trate estes valores como pontos de partida para testar.

### Subamostragem de croma

A maioria dos codificadores JPG guarda a cor com metade da resolução do brilho, o que se escreve 4:2:0. O olho mal percebe em fotos, mas letras coloridas e gradientes saturados ganham bordas moles e borradas. Muitas ferramentas escondem isso numa opção avançada; desligar (4:4:4) custa um pouco de tamanho e mantém as bordas de cor nítidas.

### Quantização do PNG

Otimizadores de PNG muitas vezes reduzem o arquivo convertendo-o para uma paleta de 256 cores ou menos. Isso é ótimo para logos chapados e péssimo para gradientes, que precisam de milhares de tons. Se um PNG comprimido de repente forma faixas, a quantização é quase sempre a causa.

## Granulado: a melhor solução para as faixas

Acrescentar uma camada fina de ruído parece contraditório, mas é a cura mais confiável. O granulado espalha pixels um pouco mais claros e mais escuros, então o olho funde os degraus numa rampa suave, e o compressor tem textura para preservar em vez de trechos lisos para fundir. Ele também faz um gradiente digital parecer uma superfície. [Gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) mostra quanto usar.

Uma hero larga e escura de site com um gradiente liso e um título curto, ilustrando o risco de faixas

Uma transição escura e lisa em 1920×1080 é a imagem com mais chance de formar faixas depois da compressão.

Uma hero larga de site com um gradiente texturizado e granulado atrás do mesmo título

Com um granulado fino na superfície, o mesmo tipo de transição sobrevive à compressão e se lê como um material.

Na web, você pode acrescentar granulado em CSS ou SVG em vez de embuti-lo numa imagem grande, o que mantém o download minúsculo. Veja [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture). Os Marks do Gradiently trazem o granulado como parte do material, então um design feito com um deles já tem a textura que o ajuda a sobreviver à recompressão das plataformas.

## Um método para comprimir qualquer imagem

1. **Redimensione para o tamanho de exibição** A maior economia são pixels de que você nunca precisou. Um post do Instagram de 1080×1350 deve ser exportado em 1080×1350, não com 4000 pixels de largura.
2. **Escolha o formato pelo conteúdo** Texto, logos e gradientes: PNG ou WebP sem perdas. Fotos: JPG, WebP ou AVIF. [PNG vs JPG](https://gradiently.design/pt-br/guide/png-vs-jpeg) e [WebP vs PNG e JPG](https://gradiently.design/pt-br/guide/webp-images) vão mais fundo.
3. **Comece com qualidade alta e vá baixando** Comece em 90, desça de cinco em cinco e compare em 100%. Pare no passo anterior ao que muda visivelmente o gradiente mais escuro.
4. **Comprima uma vez, a partir do original** Guarde um original sem compressão. Toda nova exportação sai dele, nunca de um JPG anterior.
5. **Confira o arquivo final onde ele vai ficar** Publique um post de teste ou abra a página no celular. Plataformas e CDNs podem comprimir de novo.

## Ferramentas de compressão confiáveis

O app web Squoosh, do Google, permite comparar formatos e ajustes lado a lado com um controle deslizante, o jeito mais rápido de aprender o que cada controle faz. Para pastas de imagens, codificadores de linha de comando fazem o mesmo trabalho em lote.

```bash
# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg

# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp

# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webp
```

Rode estes comandos num original sem compressão, nunca num arquivo que já passou por compressão com perdas.

Se o seu gradiente é o fundo de um site, a imagem mais leve é nenhuma imagem: um gradiente CSS não custa download nenhum e nunca forma faixas por compressão, embora ainda possa mostrar degraus de 8 bits em transições escuras e largas. [Fundos em CSS](https://gradiently.design/pt-br/guide/css-background-image) mostra como sobrepor gradientes a uma textura de granulado minúscula, e [como otimizar imagens para a web](https://gradiently.design/pt-br/guide/lighthouse-image-performance) explica o que o Lighthouse procura.

## FAQ

### Como comprimir imagens sem perder qualidade?

Redimensione para o tamanho em que a imagem aparece, use PNG ou WebP sem perdas para artes e JPG, WebP ou AVIF com perdas em qualidade alta para fotos. Compare com zoom de 100% antes de baixar o ajuste.

### Por que a compressão causa faixas nos gradientes?

A compressão com perdas funde cores quase idênticas, e um gradiente suave é feito quase só de vizinhos quase idênticos, então trechos de cor colapsam em listras visíveis.

### Qual é o melhor ajuste de qualidade JPEG?

Cerca de 80 a 85 para fotografias e 90 a 95 para artes com texto ou gradientes. Os números de qualidade variam entre ferramentas, então confira o resultado com zoom de 100%.

### Acrescentar granulado reduz mesmo as faixas?

Sim. Um granulado fino quebra os degraus entre as cores, então o olho lê uma rampa suave, e dá ao compressor textura para preservar em vez de áreas lisas para fundir.

### Devo comprimir arquivos PNG?

A otimização de PNG sem perdas é sempre segura. Evite reduzir um PNG com gradiente a uma paleta de 256 cores, o que causa faixas.