At work we collaborate with a few design companies and each of them like their images to look good on the web. Naturally.

There is always one thing that continually bugs us and that is what an image looks like in Photoshop (lovely, vibrant and rich) and what it looks like when its saved for the web (ugly, dull and plain) which induces a bit of head scratching.

This problem is one that I always forget the solution to. I ask myself “how did I do it last time?” and “why did I not bloody note it down somewhere?” I debate with my boss as to the cause of the problem which usually revolves around wether to ditch or not to ditch embedded colour profiles, sort our monitor colour calibration and what browsers do what to images. But, I never really think I know what the hell is going on, I kind of muddle through.

My usual workflow after trial and error in Photoshop is:

1. Import the image and ditch the embedded colour profile
2. Do what needs doing
3. Save for Web and Devices and ‘Convert to sRGB’ in the little overflow menu next to the ‘Optimized’ tick box.
4. Put it on the internet and wait for either the complaints to roll in that the image looks crap or not.

That workflow recently hasn’t yielded any complaints which leads me to believe it maybe okay. I wasn’t sure.

I recently wanted to know what other people where doing. I looked on Google and found that Viget.com have an article way better than this one explaining the whole thing. The reassuring thing for me is they do basically what I was doing except they explicitly mention working in Monitor RGB (Proof Setup > Monitor RGB). Luckily I was.

Read ‘The mysterious save for web colour shift’ article to get the full story and the theory behind it.

A word of warning. This issue is highly contentious and the comments of the Viget article highlight this. It seems like you can’t totally nail it but this method is one of the simpler solutions that yields some more predictable results without getting into setting profiles and calibrating your monitor.

This kind of sums up what we have to deal with:

What we’re doing here won’t make your colors look the same on all monitors or machines. Macs will display lighter (by default, at least), and monitors themselves will experience crazy color shifts based on age and settings. Reassure yourself: This is not your fault. The key is to calibrate your monitor as close to the center as possible … and be prepared to gently explain to clients why your green looks like aqua on their friend’s 1992 Trinitron.

Gotta love the web.