A little over a week ago, just before declaring my new blog ready (well as ready as it will ever be) I tested it on a couple of different platforms (like you do), previously this meant testing it on windows & linux and the different browsers but now i have a mac i have more platforms to experiment with. In fact i designed this site on the mac, so the testing involved checking it worked on windows. When I did I almost jumped out of my skin, I felt the world collapse around me, all my beliefs were proven false, I had been living a lie. Somehow, the colours of the banner art didn’t match the page colours, for instance the purply-bluey colour behind the logo was a different shade to the purply-blue running down the right hand side of the page. How could this be? Turns out that PNG files store the gamma of the display, so that when displayed on a different machine the browser can adjust the brightness of the image to that that the original author saw. Problem is different images don’t necessarily have a gamma stored, and page styles aren’t adjusted either so it goes a bit out of sync. The PNG’s gamma value comes into play particularly when going between mac’s and PC’s because mac’s typically have their gamma set to 1.8*, whereas windows and linux prefer a gamma of 2.0*. It makes me wonder how many sites i’ve done in the past on windows which have had incorrect colours on a mac? We really ought to be warned about these things.
In typical adobe style the situation is made worse because of a missing feature in Photoshop. You see, the PNG gamma setting is not documented anywhere, and photoshop offers no method to leave it unset. To make things worse photoshop presumes that you have your mac ALWAYS set to the default display gamma. So all PNG’s are spit out with a 1.8* gamma regardless.
This is where PNGCrush comes to the rescue, its a small command line app for adjusting various properties of a PNG, there are several ways to fix the gamma issue but I’ve found the following to work the most consistently.
- Assign the colour profile for your display to your photoshop image, (for instance choose “Color LCD” from the Assign Profile dialog)
- Export the PNG via the Save-For-Web feature
- From a terminal window, navigate to the images directory and type something like…
pngcrush -rem gama originalimage.png fixedimage.png
You can also do a whole directory of png’s thusly…
>pngcrush -rem gama -d fixed *.png
it will create a dir called fixed with the new png’s.
It’s a faff, but its better than having mismatched colours. ubuntu users will undoubtly find PNGCrush in Synaptec. Whilst mac users can install it via darwinports by issueing…
>port install pngcrush
Windows users can find it where ever.
* I think this is right, i can’t be bothered to check.