How to export PNG to be compatible with all browsers

Question

I recently found our that some PNG files render a slightly different shade of color in Safari. (I think this is because Safari can't render PNG Gamma channel properly or what).

How do I export the PNG images so that they work perfectly fine throughout all the browsers. (preferable using Adobe Photoshop)

Answer 1

See this thread from the Apple support, but Safari uses the monitor's colorspace, which is different than most browsers, which only use sRGB. Hopefully the article will have some good information for you.

Answer 2

Your best bet would be to use the Save for Web & Devices... option. It's Photoshop's preferred method for exporting for web. That being said, the appearance of color on a website is always at the mercy of the user's screen calibration.

Answer 3

The slightly different shade is caused by browser applying gamma correction to colors in PNG, but not to any other colors.

To work around it:

1. Save image as sRGB with gamma 2.2 (that's the default in almost all programs, so if you don't have config options for it, you don't have to do anything).
2. Use image optimizer to strip gamma information from the file (that prevents browsers from trying to "correct" the file).

You'll find more information about cross-browser compatibility in PNG that works article.