Expert: Scott Valentine - 4/17/2008

Question
QUESTION: Hi,
This has been an ongoing mystery for me. When I save an image from Illustrator or Photoshop for use on the web, the colors on that image fade. I don't need these for print at all, just for the web.

I just saved an image that I captured in a screencap via Apple's Grab application (I'm on a Powerbook G4). Grab saves the image as a tiff. I opened it in Photoshop, marked on it with red paintbrush, then saved it for the web as a jpg, using Photoshop's "Save for web" function. The color difference is about 40% lighter then what it should be - both the screencap and the red paintbrush from Photoshop. The image is an RGB. In the top of the window, it says RGB/8*.

I don't think my monitor is the problem, as I can see a clear difference between the web file and the pre-web file. But I'm very inexperienced with calibrating anyway, so hope that is not the problem. When printed digitally, from art I have created in Illustrator, either from a photograph or from artwork I create, the digital result is the same as on my monitor. So, I don't want to mess much with the monitor, but I don't think that's the case.

I hope you can help. I just don't know where to start, and it's such a problem!

Many thanks.

ANSWER: Thanks for your question! First, some good news; you're not doing anything wrong. The bad news is you are going to have to compromise if you want your web images to look the same in Photoshop and in print. I don't really recommend this solution, though.

The problem is that using Save For Web throws out any color profiles you are using. If your monitor and your printer agree very well, you may have a good calibration, but chances are you are working in something other than sRGB space. That's ok, and I typically don't use sRGB except for web images.

You have a couple of ways to solve this issue... you can do all your work that will go to the web starting in sRGB space; you can save a copy of your final image and convert it to sRGB then correct it before using Save For Web; you can recalibrate your system to match the limited gamut of sRGB; you can not bother with trying to fix it. I highly recommend option 2 - save a copy and correct it.

Also, if you are using any kind of color management, you should set your proof to "monitor" so you can see the screen result. Using other proofing modes gives you a simulated view of those media or output devices. Using "monitor" or "screen" depending on your version, will give you more consistent results.

So, to sum up; save your final image copy as sRGB and fix it there, use monitor or screen proofing, and avoid color profiles for web-bound images.

I hope this helps. If you have any further questions, or would like more detail, please ask!

-Scott

---------- FOLLOW-UP ----------

QUESTION: Great! This was a great lead. I tried the problematic image again in Photoshop, after changing the color profile to Monitor (had been on North American General Purpose 2), and the red circles I had drawn on the TIFF screencap were still faded. Then I tried it in Illustrator, with the same color, and the red did not fade. Perhaps in Illustrator, when saving an ai file for the web, I will unselect the "Embed ICC Profiles". Maybe that will help.

If you have any other thoughts, it's appreciated, but I know there are loads of settings that could be causing this. Thanks!

Answer
I've been noodling on this and don't have any other solutions to try. If you still can't figure it out, maybe the next step is to try Adobe support, or the support forums on Adobe.com. While these can sometimes be frustrating, from time to time, the engineers stop by to offer help. It's a roll of the dice, but is worth a shot.

Sorry I couldn't be of more help!

-Scott