Folks,

I am sure many of you would have wondered why the same image looks different on different viewing devices, even browsers… A lot of factors affect how a monitor (if I may use that as the broad term to describe electronic viewing devices) renders colors of an image. A CRT monitor would do it differently than a LCD and a new CRT monitor would differ from an aged one of the same brand.  You need to calibrate the monitor correctly to be able to faithfully see colors. But this post is not about monitor calibration. You can calibrate your own monitors but not of the rest of the world. So what are our choices? Not many…!

Heres what I have found and experienced. I always convert images to be shared on electronic media to have sRGB (standard RGB) color space. The sRGB is the de’facto color space of the world and the world wide web.  You could be working in Adobe RGB or ProPhoto RGB while editing your images but while putting on the web, convert them to sRGB. No dont just assign a sRGB color space, ‘convert’ to sRGB. Guys using photoshop would know what I mean. Go to Edit > Color Settings > and convert.

You would generally need to reduce the image size before sharing. In photoshop, the ‘save for web and devices’ option in ‘File’ menu does just that. It down-rez the image to 72 ppi and removes all color color management information (like color space) from the image. You have the option of allowing PS to embed a sRGB space – which I found works fine.

Next you need to see how the colors could look. Go to View > Proof Setup and click on Monitor RGB. This tells you how the image will look on the monitor. You can also check Windows/Mac RGB to check how browsers will render colors. I have seen that save for web only bumps the gamma a little but the colors are mostly identical – I have seen pretty carefully and I dont see any difference.

Do does that get rid of your cross-browser, cross-moniotr color woes? No..! but thats not your fault. This is the best you can do to make sure your images render most faithfully across different browsers/monitors…

Try it yourself and see the difference…