Compressão de imagens sem estragar os gradientes

A compressão de imagens reduz um ficheiro de duas maneiras. A compressão sem perdas guarda exatamente os mesmos píxeis de forma mais eficiente, como quando comprimes um documento num zip. A compressão com perdas deita fora o detalhe que prevê que não vais notar. As fotografias escondem bem essa perda porque estão cheias de textura. Os gradientes suaves não escondem nada: comprime demasiado uma mistura suave e ela parte-se em riscas, manchas e blocos. A solução é uma combinação do formato certo, da definição de qualidade certa e de um pouco de grão.

Porque é que os gradientes se estragam ao comprimir

Uma imagem normal guarda 256 níveis para cada um de vermelho, verde e azul. Parece muito, até olhares para uma mistura escura e subtil. Indo de #14101f a #2a2147 num cabeçalho com 1920 píxeis de largura, o canal vermelho só sobe 22 níveis. Cada nível tem de se estender por cerca de 87 píxeis, por isso já estás a um passo de faixas visíveis antes de qualquer compressão.

A compressão com perdas simplifica depois a imagem em pequenos blocos e funde cores quase iguais. Numa fotografia, os píxeis vizinhos raramente são iguais, por isso pouco muda. Num gradiente, quase todos os vizinhos são quase iguais, por isso troços inteiros de cor colapsam numa só. Isso são as faixas de gradiente, e as misturas escuras e pastel são as que mais as mostram.

As definições de qualidade que importam

Cada formato tem um botão principal e alguns escondidos. Estes pontos de partida são conservadores para gráficos com gradientes e texto; as fotografias costumam poder descer mais. Avalia sempre a 100% de zoom num bom ecrã, nunca numa miniatura.

Subamostragem de croma

A maioria dos codificadores de JPG guarda a cor com metade da resolução do brilho, o que se escreve 4:2:0. O olho quase não repara nas fotografias, mas as letras coloridas e os gradientes saturados ficam com bordos suaves e esborratados. Muitas ferramentas escondem isto numa opção avançada; desligá-la (4:4:4) custa um pouco de tamanho e mantém nítidos os bordos de cor.

Quantização do PNG

Os otimizadores de PNG costumam reduzir os ficheiros a uma paleta de 256 cores ou menos. Isso é excelente para logótipos planos e péssimo para gradientes, que precisam de milhares de tons. Se um PNG comprimido passa de repente a ter faixas, quase de certeza a causa é a quantização.

Grão: a melhor solução para as faixas

Juntar uma camada fina de ruído parece ao contrário, mas é a cura mais fiável. O grão espalha píxeis ligeiramente mais claros e mais escuros, por isso o olho funde os degraus numa rampa suave, e o compressor tem textura para manter em vez de troços planos para fundir. Também faz um gradiente digital parecer uma superfície. Os gradientes com grão mostram quanto usar.

Na web podes juntar grão em CSS ou SVG em vez de o gravar numa imagem grande, o que mantém a transferência minúscula. Vê a textura de ruído em CSS. Os Marks do Gradiently trazem grão como parte do seu material, por isso um design feito com um já tem a textura que o ajuda a sobreviver à recompressão de uma plataforma.

Um método para comprimir qualquer imagem

1. 1

   Redimensiona para o tamanho de apresentação

   A maior poupança são os píxeis de que nunca precisaste. Uma publicação de Instagram de 1080×1350 deve ser exportada a 1080×1350, não com 4000 píxeis de largura.

2. 2

   Escolhe o formato pelo conteúdo

   Texto, logótipos e gradientes: PNG ou WebP sem perdas. Fotografias: JPG, WebP ou AVIF. PNG vs JPG e WebP vs PNG e JPG aprofundam isto.

3. 3

   Define uma qualidade alta e depois baixa-a

   Começa em 90, desce de cinco em cinco e compara a 100%. Pára no passo anterior àquele em que vês uma mudança no gradiente mais escuro.

4. 4

   Comprime uma só vez, a partir do original

   Guarda um original sem compressão. Cada nova exportação sai dele, nunca de um JPG anterior.

5. 5

   Verifica o ficheiro final onde ele vive

   Carrega uma publicação de teste ou abre a página num telemóvel. As plataformas e as CDN podem voltar a comprimir.

Ferramentas de compressão de confiança

A aplicação web Squoosh, da Google, deixa-te comparar formatos e definições lado a lado com um cursor, que é a forma mais rápida de aprender o que faz cada botão. Para pastas de imagens, os codificadores de linha de comandos 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 teu gradiente é o fundo de um site, a imagem mais leve é nenhuma imagem: um gradiente CSS não custa transferência nenhuma e nunca forma faixas por compressão, embora ainda possa mostrar degraus de 8 bits em misturas escuras e largas. Os fundos em CSS mostram como sobrepor gradientes com uma pequena textura de grão, e a otimização de imagens para a web cobre o que o Lighthouse procura.