Compressão de imagem sem estragar os gradientes

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.

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, e transições escuras e em tons pastel são as que mais mostram.

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.

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 mostra quanto usar.

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. 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. 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. 2

   Escolha o formato pelo conteúdo

   Texto, logos e gradientes: PNG ou WebP sem perdas. Fotos: JPG, WebP ou AVIF. PNG vs JPG e WebP vs PNG e JPG vão mais fundo.

3. 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. 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. 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.

# 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

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 mostra como sobrepor gradientes a uma textura de granulado minúscula, e como otimizar imagens para a web explica o que o Lighthouse procura.