Avevo chiesto due immagini per l’header del blog: sfondo trasparente, mi serviva per farle integrare bene con i tre temi. I file sono arrivati, sembravano perfetti: un bel disegno a china di una scrivania, e intorno il classico pattern a scacchi bianco e grigio che ogni programma grafico usa per indicare “qui non c’è niente”.
Peccato che i file fossero due .jpeg. E il formato JPEG, per definizione, non sa cosa sia un canale alpha. Quello che sembrava trasparenza era in realtà un disegno del pattern a scacchi, pixel veri, stampati dentro l’immagine come se fossero parte del disegno. Uno sfondo trasparente finto. Lo strumento che genera l’immagine “vede” la trasparenza nella sua anteprima, ma quando esporta in un formato che non la supporta, la trasparenza diventa semplicemente un altro disegno.
Sistemarlo non è stato complicato, solo un po’ più sottile del previsto. L’idea di base: ogni pixel del pattern a scacchi è chiaro e desaturato (bianco o grigio chiarissimo), mentre il disegno vero è scuro o colorato. Basta calcolare un canale alpha a partire da luminosità e saturazione, pixel per pixel:
val = max(r, g, b)
sat = val - min(r, g, b)
if sat > 30:
alpha = 255 # colore vero (es. il giallo del walkman)
else:
eff_val = 255 if val >= 210 else val
alpha = 255 - eff_val # bianco/grigio chiaro -> trasparente
Primo tentativo: quasi giusto. Ho composto l’immagine ripulita sopra uno sfondo scuro per controllare, e il pattern a scacchi era ancora lì, debolissimo ma visibile, come un fantasma. Il grigio del pattern non era abbastanza chiaro da superare la mia soglia (avevo messo il taglio a 235, il grigio del pattern era a 227): sopravviveva un filo di opacità, il 10% circa, che sul nero si vedeva benissimo. Abbassata la soglia a 210, il fantasma è sparito.
A quel punto ho scoperto che avere davvero la trasparenza cambiava anche il piano. Un disegno a china nera, per quanto pulito, sparisce su un tema scuro — nero su nero non si legge. Quindi invece di trattarlo come un’immagine a colori fissi, l’ho trasformato in una maschera CSS: la forma resta quella del disegno (il canale alpha), il colore lo decide il tema attivo. Risultato: la stessa illustrazione è color crema sul tema Terminal, quasi nera su Notebook, quasi bianca su Circuit e cambia da sola quando clicchi lo switcher, senza che io debba generare tre immagini diverse.
La morale, se ce n’è una: quando un tool di AI ti promette uno sfondo trasparente, controlla il formato del file prima di crederci. E se proprio devi ripulirlo a mano, la differenza tra un fantasma nel PNG e uno sfondo davvero pulito a volte sta in una manciata di unità su una soglia che avevi già scritto giusta, solo tarata male.
Stay tuned