Perché il tuo gradiente ha le strisce e come correggere il banding

Il banding dei gradienti si ha quando un gradiente liscio mostra strisce o gradini visibili invece di una sfumatura continua. Succede perché le immagini digitali possono memorizzare solo un numero limitato di tonalità per colore, di solito 256 per canale, e quando un gradiente cambia lentamente su un’area ampia, ogni tonalità deve coprire una banda di pixel. Il tuo occhio è molto bravo a individuare i bordi, quindi nota quelle bande. Il rimedio di solito è aggiungere una grana fine, esportare con meno compressione o dare alla sfumatura più colore con cui lavorare.

Cosa causa il banding dei gradienti

La maggior parte delle immagini usa 8 bit per canale: 256 valori possibili ciascuno per rosso, verde e blu. Sembra molto, e per un gradiente marcato lo è. Il problema comincia quando i colori alle due estremità sono vicini.

Prendi un gradiente grigio da #202020 a #303030 su uno schermo largo 1920 pixel. Ogni canale si muove solo da 32 a 48, cioè 16 gradini. Quindi il gradiente contiene 16 tonalità distinte, ciascuna larga circa 120 pixel. Nessun software può renderlo più liscio, perché non ci sono tonalità intermedie da usare.

Dove il banding si vede di più

Ecco perché gli sfondi con gradiente scuro e i gradienti aurora richiedono la massima cura. La loro bellezza dipende da lunghe rampe dolci tra toni scuri, ed è proprio la ricetta del banding.

Come correggere il banding dei gradienti

1. 1

   Aggiungi grana o dither

   Uno strato fine di rumore casuale sparge i pixel tra tonalità vicine, così l’occhio non riesce più a trovare i bordi. È il rimedio più affidabile, e fa anche sembrare più ricca la superficie. Vedi i gradienti granulosi.

2. 2

   Dai alla sfumatura più gamma

   Differenze più ampie di luminosità o tinta tra i colori alle estremità significano più gradini disponibili e bande più strette. Un gradiente che sposta anche un po’ la tinta usa più combinazioni di rosso, verde e blu di una rampa di sola luminosità.

3. 3

   Lavora a 16 bit dove puoi

   Gli editor di immagini che supportano 16 bit per canale mantengono molti più livelli mentre lavori. Converti a 8 bit solo in esportazione, con il dithering attivo.

4. 4

   Esporta in alta qualità

   Usa il PNG per la grafica piatta, oppure il JPEG a un’impostazione di alta qualità per le immagini fotografiche. Evita GIF e PNG-8, che mantengono solo 256 colori in totale.

5. 5

   Esporta alla dimensione finale

   Ingrandire una piccola immagine con gradiente ne allarga le bande. Genera o esporta alla dimensione esatta, o più grande, invece di ingrandire.

Correggere il banding nei gradienti CSS

I browser generano i gradienti CSS dal vivo, quindi non c’è un’impostazione di esportazione da cambiare. Aiutano due cose. Primo, allarga la rampa o aggiungi uno spostamento di tinta. Secondo, sovrapponi al gradiente uno strato sottile di rumore, che funziona esattamente come la grana in un’immagine. La texture rumore in CSS mostra modi leggeri per fare quello strato senza grandi file immagine.

Correggere il banding in video e caricamenti sui social

Le piattaforme social ricomprimono ciò che carichi, e i codec video sono progettati per scartare esattamente il tipo di dettaglio sottile che mantiene lisci i gradienti. La grana aiuta due volte: nasconde i gradini e dà all’encoder dettagli veri da conservare. Carica alla dimensione consigliata dalla piattaforma così non viene ridimensionato di nuovo, ed esporta il video con un’impostazione di qualità generosa. Se codifichi con ffmpeg, x264 ha un’impostazione tarata per conservare la grana.

# 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

Gli sfondi video in loop sono particolarmente soggetti a questo problema, perché di solito sono scuri e lenti. I video in loop senza stacchi tratta il resto dell’esportazione.

Prevenire il banding fin dall’inizio

• Scegli gradienti con abbastanza cambio di luminosità o di tinta per la loro dimensione
• Pianifica la grana fin dall’inizio invece di aggiungerla come salvataggio
• Tieni i gradienti scuri un po’ schiariti invece di farli scivolare fino al nero puro
• Controlla su un telefono dopo il caricamento, non solo sul monitor di design

Ogni Mark di Gradiently viene generato dal vivo alla dimensione in cui progetti, con la sua grana come parte della ricetta, e i design fatti con un Mark riservato si esportano in PNG o JPEG fino a tre volte la dimensione del design, così un gradiente non deve mai essere ingrandito da una piccola immagine.