PNGs and color management in Safari
Sometimes getting the colors in your images to match across browsers is a pain. This is especially true now that Safari 3 and Firefox 3 are rendering images with their embedded color profiles. However, the problem runs deeper. PNGs specifically have gamma correction included in the file and Safari will obey it. So, despite having the same color space, you will get a different rendering in Safari than in Firefox. Here’s how I fixed it.
After a while of on-and-off research trying to figure out why my PNGs were not rendering with the correct colors in Safari, I came across a couple of blog posts. The first, which was very informative, recommends double-checking your embedded color profiles. If they don’t match, the colors will come out differently. That makes a lot of sense. For the web, default to sRGB or don’t include one at all. Most browsers will assume sRGB if there is no color profile included.
I did this and I still had some odd rendering. After some more research I came across this blog post (check out this page for some background info on PNGs on the web) specifically about PNGs. So, there is gamma correction in PNGs that is independent of the color profile. That’s annoying! But, you can strip out all that extra information and have the browser drop back down to defaults with a neat little app called GammaSlamma. Just drop your PNG onto the application and done! For Linux and Windows machines, check out PNGCrush.
