Colore PNG e CSS differente su browser e Photoshop: ecco come risolvere

E’ già la seconda volta in meno di 4 mesi che mi capita questo problema, pensavo di essere sfortunato con queste immagini PNG, ma a quanto pare il fatto tende a ripresentarsi abbastanza frequentemente, per cui ho deciso di condividere con voi la soluzione.

Ieri pomeriggio mentre terminavo una personalizzazione grafica in Photoshop di un tema WordPress formato da numerose immagini PNG, mi sono accorto di un fastidioso problema: dopo aver fatto l’upload in locale ed aver visualizzato il risultato, il colore impostato in Photoshop identico a quello di background del mio file CSS in IE7 e Chrome, non sembrava essere lo stesso, e precisamente in video appariva così:

Come vedete i colori della footbar sembrano diversi, ma in realtà sia il colore di riempimento utilizzato su Photoshop che il colore di background indicato sul file CSS sono gli stessi, sono correttamente impostati sul valore #6295E8; ecco uno zoom dell’area interessata:

Come vedete la differenza è abbastanza visibile. Dopo numerose ricerche su Google, sono finalmente riuscito a risolvere questo tedioso problema, in maniera abbastanza semplice, senza ricorrere alla madornale ed improponibile alternativa di convertire tutto il tema in jpg.

Utilizzando un fenomale programmino freeware TweakPNG, siamo in grado di ovviare a questa difformità di colore, in maniera abbastanza semplice e veloce. Una volta fatto il download e dezippato il contenuto del file, lanciate il file eseguibile e dal menu File -> Open, (oppure semplicemente trascinandolo) caricate il file incriminato per visualizzare le seguenti informazioni:

Per risolvere completamente il problema, basterà eliminare il chunk gAMA e salvare il file. Già che ci siete se volete ridurre le dimensioni del PNG potete anche eliminare il pHYs e iCCP (se presente), e se non utilizzate le trasparenze, anche cHRM può essere cancellato.

Dopo aver salvato il nuovo file PNG e sostituito a quello “difettoso“, il risultato ottenuto è stato molto più che soddisfacente:

Certo… è un metodo leggermente macchinoso, ma almeno non dovrete convertire tutto il vostro tema da PNG a JPG! Ed inoltre vi assicuro che per trovare la soluzione mi sono dovuto leggere tonnellate di byte prima di trovare questo escamotage… Spero di aver contribuito a risolvere un problema che per il sottoscritto stava veramente diventando molto noioso!

Fonte BioRUST