Help! Color over-saturated after uploading photos online.

[Matt Timmons]

Ok, here's something that's been absolutely driving me crazy for some time now. I'm working on a new website and whenever I finish a photo and upload it to my site, the skin tones and anything in the red gamut are completely over-saturated when viewed online, and only when viewed online. When I view the page with the photos in my web page creator (Dreamweaver CS4) it looks fine. In PS it looks fine. Anywhere locally it looks right, but when viewed on the actual website it's blatantly over-saturated in the red gamut. I'm using two monitors- one a PC and one a Mac and three browsers, Safari, Fire Fox and IE 8 so I can compare all around. Here's my method of getting photos ready for online viewing, what am I doing wrong?

1. Monitor is profiled (using Colormunki) and settings are current.

2. Finish photo in Photoshop- looking good.

3. Resize photo for web (72 dpi, height/width as needed)

4. Sharpen photo slightly with smart sharpen.

5. Select 'Save for Web and Devices' in the File menu-
a: make file size around 100K
b: make sure "Convert to sRGB" is checked and "Embed Color Profile" is checked (on).

6. Save file.

7. Open Dreamweaver and place photo in page.
a: Preview final in Safari and Fire Fox - looks good.

8. Upload file, then view online and bang head against table when colors are completely wrong.

Nick, what do you guys do for saving files for your Slickforce site? Your photos look good in Safari, Fire Fox and Internet Explorer. Help!

[Nick Saglimbeni]

Hey Matt,

It's definitely an ICC color profile issue, and we've dealt with many in the past. I'm not sure why they don't just make "smart" profiles that convert automatically, since very few people know how to keep them consistent.

I'll tell you what we personally do, but I can't promise this will work in every case. First, it doesn't actually matter what color space you are working in within Photoshop, so just use whatever you've been using (or the native file space...for me it will always be either AdobeRGB(1998) or my monitor's calibrated profile). Before you Save for Web, go to Edit, Convert to Profile, and then select your MONITOR's profile. Though this has plagued photographers and designers alike for years, this work-around is the only solution that has worked for us. Personally, (within the Save for Web interface) I don't convert to sRGB OR embed the profile, because sRGB will shift the color and no one else has my monitor profile, so (I believe this is true based on my experience, though I could be proven wrong) if you don't embed a profile, everyone who views it will see it automatically converted to their own color space.

When I was shooting for Maxim en Espanol, the publishers always complained of red color previews, which I can attribute to embedding an AdobeRGB profile in the web file, while their mail programs and browsers were naturally trying to view it as sRGB.

It's a big pain since my stuff goes to print & web, so I have to double-convert every time, but I haven't had any color-shift issues yet. I was having EXACTLY the issue you are talking about, where the skin gets extra red and super rich (the opposite problem is that you'll experience a green desaturated tint, which I can assume is the reverse sRGB preview). Let me know if it works.

[Matt Timmons]

Yup, that took care of it. All images are consistent in Safari, IE and FF. I've been re-building my website and it drives me nuts to think of all the time I spend getting these shots done only to have the final result look like shit because of browser incompatibilities. One day this will all be standardized (hopefully). The images on your website have brilliant colors, sharp contrasts and smooth tonal transitions. So when I saw the consistency you were getting across different platforms I knew who I needed to go to for help. Thanks so much for keeping me from jumping out the window! (It's only a 2-foot drop, but still) :king:

[Nick Saglimbeni]

No, are you kidding? Thank YOU. This is my first successful forum thread troubleshooting, which means there was a point to this forum after all! :D

Glad to know all those years of ME nearly jumping out the window finally helped someone!