Porque é que o teu gradiente tem riscas e como corrigir o banding

O banding em gradientes acontece quando um gradiente suave mostra riscas ou degraus visíveis em vez de uma transição contínua. Acontece porque as imagens digitais só conseguem guardar um número limitado de tons por cor, normalmente 256 por canal, e quando um gradiente muda devagar numa área larga, cada tom tem de cobrir uma faixa de píxeis. O teu olho é muito bom a detetar margens, por isso distingue essas faixas. A solução costuma ser juntar um grão fino, exportar com menos compressão ou dar mais cor à transição.

O que causa o banding em gradientes

A maioria das imagens usa 8 bits por canal: 256 valores possíveis para o vermelho, o verde e o azul. Parece muito, e para um gradiente forte é. O problema começa quando as cores de cada ponta estão próximas.

Pega num gradiente cinzento de #202020 para #303030 num ecrã com 1920 píxeis de largura. Cada canal só vai de 32 a 48, ou seja, 16 degraus. Por isso o gradiente contém 16 tons distintos, cada um com cerca de 120 píxeis de largura. Nenhum software o consegue tornar mais suave, porque não há tons intermédios para usar.

Onde o banding mais aparece

É por isso que os fundos em gradiente escuros e os gradientes aurora exigem mais cuidado. A sua beleza depende de rampas longas e suaves por tons escuros, que é exatamente a receita do banding.

Como corrigir o banding em gradientes

1. 1

   Junta grão ou dithering

   Uma camada fina de ruído aleatório espalha píxeis entre tons vizinhos, e o olho deixa de encontrar as margens. É a solução mais fiável e também torna a superfície mais rica. Vê gradientes com grão.

2. 2

   Dá mais gama à transição

   Diferenças maiores de luminosidade ou de tom entre as cores das pontas significam mais degraus disponíveis e faixas mais estreitas. Um gradiente que também muda um pouco de tom usa mais combinações de vermelho, verde e azul do que uma rampa só de luminosidade.

3. 3

   Trabalha em 16 bits sempre que puderes

   Os editores de imagem que suportam 16 bits por canal guardam muito mais níveis enquanto trabalhas. Converte para 8 bits só na exportação, com o dithering ligado.

4. 4

   Exporta em alta qualidade

   Usa PNG para gráficos lisos, ou JPEG com qualidade alta para imagens fotográficas. Evita o GIF e o PNG-8, que guardam só 256 cores no total.

5. 5

   Exporta no tamanho final

   Ampliar uma imagem pequena de um gradiente estica as suas faixas. Renderiza ou exporta no tamanho exato, ou maior, em vez de ampliar.

Corrigir o banding em gradientes CSS

Os navegadores renderizam os gradientes CSS em direto, por isso não há definição de exportação para mudar. Duas coisas ajudam. Primeiro, alarga a rampa ou junta uma mudança de tom. Segundo, põe uma camada subtil de ruído sobre o gradiente, que funciona exatamente como o grão numa imagem. A textura de ruído em CSS mostra formas leves de criar essa camada sem ficheiros de imagem grandes.

Corrigir o banding em vídeo e carregamentos nas redes

As plataformas sociais voltam a comprimir o que carregas, e os codecs de vídeo são feitos para deitar fora exatamente o tipo de detalhe subtil que mantém os gradientes suaves. Aqui o grão ajuda duas vezes: esconde os degraus e dá ao codificador detalhe real para guardar. Carrega no tamanho recomendado pela plataforma para não ser redimensionado outra vez, e exporta o vídeo com uma qualidade generosa. Se codificas com o ffmpeg, o x264 tem uma definição afinada para preservar o grão.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Os vídeos de fundo em loop são especialmente propensos a isto, porque costumam ser escuros e lentos. Os vídeos em loop contínuo tratam do resto da exportação.

Prevenir o banding desde o início

• Escolhe gradientes com mudança suficiente de luminosidade ou de tom para o seu tamanho
• Planeia o grão desde o início em vez de o acrescentar como salvação
• Mantém os gradientes escuros ligeiramente levantados em vez de descerem até ao preto puro
• Confirma num telemóvel depois de carregar, e não só no monitor de design

Cada Mark da Gradiently é renderizado em direto no tamanho em que desenhas, com o grão como parte da receita, e os designs feitos com um Mark reservado exportam em PNG ou JPEG até três vezes o tamanho do design, por isso um gradiente nunca tem de ser esticado a partir de uma imagem pequena.