[png] Il calvario dei gradienti

[ntd]

Per mesi ho usato sfumature a gradienti in formato png sennonché recentemente mi sono trovato a vedere un mio sito in Safari e a stento ho trattenuto un conato di vomito: il colore finale della sfumatura non coincide col colore di sfondo, dando un effetto di sfumato interruptus ben poco gradevole.

Dopo parecchie ricerche (ed essermi incautamente addentrato in quel vespaio che è l'ICC), pare che il problema sia la non precisa definizione di "gamma" nello standard png. Ho perciò sviluppato una pagina di prova e questi sono i magri risultati:

http://www.entidi.it/data/gradienttest/

Come si nota dagli screenshot allegati:

[list=1][*]Explorer7 usa il valore di gamma solo se specificato nel png, altrimenti mantiene la corrispondenza coi colori specificati nel CSS, ossia #9ad6d7 in style.css corrisponde a #9ad6d7 nell'immagine png (una delle poche volte in cui IE7 fa la cosa giusta)[*]Firefox2 se ne frega del gamma e #9ad6d7 corrisponde sempre a #9ad6d7 nell'immagine png[*]Safari2/3 usa il valore di gamma e, se non lo specifico nel png, ne applica uno fantasma: #9ad6d7 nel CSS non corrisponde mai a #9ad6d7 nel png[*]Di explorer6 m'importa una [/list=1]

L'uso di jpeg o gif risolverebbe la questione ma il dilemma me lo ritrovo in altri ambiti dove l'alternativa non è possibile (tab con trasparenze sfumate, per esempio).

Consigli, hints, link tecnici, supporto morale?

[Federix]

Mi vien da pensare che la cosa sia più semplice di quanto tu creda. Del formato PNG ne esistono 3 versioni, una a 8, una a 16 (o 24 non ricordo bene) e una a 32 bit.

La versione a 8bit possiede una canale alpha che gli permette di gestire le trasparenze, però questo formato, essendo ad 8bit, supporta solamente 256 colori ed anche in formata adattata non porta benefici ai gradienti lineari, radiali e così via.

La versione a 16 (o 24) e 32 bit, sopportano molti più colori, tutti quelli del monitor, però non possono avere un canale alpha, quindi nessuna trasparenza.

La cosa ideale è utilizzare JPEG per gli sfondi e PNG per i "complementi di arredo".

Sconsiglio vivamente di utilizzare il PNG in formato 16-24-32 bit in quanto corrisponde a qualcosa come un TIFF senza compressione.

[ntd]

La jpeg risolverebbe sì la questione in questo particolare esempio (anche se la qualità della sfumatura "mi sembra" inferiore, specialmente nello screenshot di safari) ma ci sono casi in cui non è usabile.

Immagina una serie di tabs/linguette sopra ad un <div background="silver">: questi tabs devono terminare in silver. Volendo poi questi tags arrotondati o sagomati e che lasciano trasparire uno sfondo arbitrario, la trasparenza è necessaria. Il gif lo evito come la peste perché ho una reputazione da difendere (battuta stanca, lo so) e perché la sua trasparenza "dura" non consente arrotondamenti di qualità.

Altra soluzione che ho trovato è usare uno sfondo con una png 1x1 ripetuta al posto del colore di background del div... non mi sconfinfera per niente ma è la soluzione che ho in pole position.

[ntd]

Alla fine ho optato per un'altra soluzione: la trasparenza graduale.

Il gradiente originale (colore da #119ee0 a #9ad6d7) in Safari non corrisponde ai corrispettivi colori RGB perché applica una correzione gamma anche quando il valore di gamma non è specificato nell'immagine PNG. Per correggere questo frustrante inconveniente, ho applicato una trasparenza graduale al gradiente in modo da terminare con trasparenza 100% dove ho la necessità di colori che combaciano.

Ciò risolve alla radice il problema Safari ma apre la rogna IE6 che non supporta la trasparenza graduale. Quest'ultimo tratta le immagini PNG in formato RGB come totalmente opache MA (e qui squilla il campanello) per ottenere questa immagine opaca combina l'immagine a trasparenze con il colore bianco o con il colore di sfondo specificato nella PNG, se presente. Ergo ho impostato il colore di sfondo a #9ad6d7 e ho registrato l'informazione nel PNG e il gradiente ora funziona su tutti i browser.

Un vero bagno di sangue... materiale per un sano articolo.