This tip is from a response to an e-mail I recently received:

"Hello Nat,

Have a question for you about photoshop and web images. I'm currently using Photoshop 7.0. I've noticed that after I get an image exactly how I want it in Photoshop as far as colors/contrast/etc. and save it, when I upload it to my website or any other site for that matter, the color seems to severely shift. It seems to go to a reddish cast. The saturation and contrast also seem to shift. I just found the "save image for web" button last night and can immediately see the shift when I put the two side by side. Is there any way to save my original corrected image and get it on the web so it looks the same as when I have it in Photoshop? Does this make any sense whatsoever? Any help would be greatly appreciated!

Thanks!
Tony L."

Hi Tony-

Thanks for your email. Your problem is a common one, and has to do with color spaces within digital image files. The reason you are seeing a color shift is because the color space of your image file does not match the color space of the device, in this case the web browser output on the monitor.

A color space defines how many colors are possible (and what those colors are, in mathematical terms) within an image. Some color spaces are "small", meaning they contain relatively few possible colors, while others are "large" and contain many colors. A color space is described by a profile.

The most common color spaces are (in no particular order):

Adobe RGB (1998) - a large color space popular among photographers because of the wide range of colors possible.

sRGB - much smaller than Adobe RGB, sRGB is the de-facto standard for the web and is the color space used by the majority of browsers. This is because sRGB is also closest to the native color spaces used by most computer monitors, and is nearly identical to the color space commonly used on Windows computers. sRGB contains fewer (and many different) colors than Adobe RGB.

ProPhoto - even larger than Adobe RGB, ProPhoto is used by photographers who want to retain as much color information as possible through the image processing pipeline. ProPhoto contains some colors that cannot be displayed or printed using current technology, but the hope is that one day these colors will be possible to reproduce.

Color Management
Color shifts occur when an image is moved from one color space to another. The colors are "remapped" to fit the destination space. Care should be taken to manage how this is done, hence the term "Color Management".

Digital color is managed through the use of "profiles", also referred to as ICC Profiles because they are derived from digital color standards defined by the International Color Consortium.

A profile describes all the colors possible for a given color space and for digital devices such as monitors and printers. Your computer likely holds many different profiles. On Mac, these files most often reside in the ColorSync folder and use the .icc extension. On Windows, they may end in .icc or .icm.

Photoshop Color Settings
Photoshop has several functions for managing color. The first is the Working Space, which is the "true" space that the current image resides in. From the Working Space, you can convert images to other spaces or tag them as belonging to a given space. Again, this is all done through the use of profiles.

How Photoshop manages color is defined by preferences set in the Color Settings panel. In Photoshop 7, Color Settings is found under the File menu. In later versions, it's under the Edit menu.

In Color Settings, you can define your Working Spaces for RGB, Grayscale and CMYK color, and determine how Photoshop will handle the transition from one space to another.

Tip: Make sure to click the "Advanced Options..." or "More Options..." button to show all the available settings in the Color Settings panel.

The most important settings are the RGB Working Space and the Conversion Options.

For most photographers, the RGB Working Space should either be Adobe RGB (1998) or ProPhoto RGB. (The exception may be for wedding or commercial portrait photographers having prints made by labs using photographic printers, whose native space is sRGB.) For images destined ultimately for inkjet printing, or if you're not sure how it will be printed, stick with Adobe RGB or ProPhoto.

Under Conversion Options, make sure that the Intent is set to Relative Colorimetric, and that Use Black Point Compensation and Use Dither are both checked.

Tip: I don't recommend using Perceptual Intent. Relative Colorimetric is the Intent that produces the most consistent color conversions.

The rest of the settings on this panel are optionally set by personal preference. For example, I set my Color Management Policies to Preserve Embedded Profiles, and I have unchecked all the "Ask When Opening". If you're concerned about keeping track of what working space an image is in, you may want to check these boxes.

Once you've entered your new settings, click the Save... Button and give the settings file a unique name. If you are ever having color problems, first go back into the Color Settings dialog and check these settings.

Preparing an Image for the Web
So, you have an image that you like, and want to post it online. Regardless of the working space, you will want to take steps to make sure that by the time your web file is saved (most likely as a .jpg) that you've converted it to sRGB first. Converting it manually ensures that the color will reproduce the way you expect it to.

The best way to do this is to use the Convert to Profile command, under the Edit Menu. This way, you have a preview of what the final file will look like. From the Destination Space dropdown menu, select one of the profiles beginning with sRGB (there may be several and it doesn't matter which one you use). You can try the various intents if you like, but Relative Colorimetric using Black Point Compensation is the most reliable. Dither most often doesn't matter. Click OK, and your file is now in sRGB.

At this point, you may choose to boost the saturation, increase contrast etc. based on how the color values may have shifted. Otherwise, go ahead and save it as a JPEG, either using Save for Web or the regular Save As... command. It's not necessary to Embed the sRGB profile.

Soft Proofing
Another important tool Photoshop provides to help you make color decisions is Soft Proof. Using Soft Proof, you can simulate what an image will look like when it's converted to another color space, most importantly, printers. But you can also use Soft Proof to simulate what an image will look like on another computer monitor or viewed on the web.

Soft Proof is found under the View menu, and contains a default list of color profiles to simulate. Click the Custom... command to open a dialog box where you can choose a profile to simulate. You can save these settings, which will then show in the Soft Proof list.

When making your own Soft Proof conditions, you'll most often want to start with the same settings used from your main Color Settings, such as Relative Colorimetric, Black Point Compensation, etc. You can create and save various Soft Proof conditions to try out a range of different settings to see how you like them. Normally, you do not want to check the box for "Preserve Color Numbers" (or better yet, try it out and see what happens).

Tip: If you're going to use Soft Proofing to make color corrections to an image, I recommend having a second copy of the image open in another window (side-by-side) that is NOT Soft Proofed. Use that file as a visual reference while you make adjustments to the file that IS Soft Proofed.

(More on Soft Proofing in another article.)

Color Management Conclusions
"Shift Happens." All color spaces are different, and going from one to another will change the colors in an image. You need to control the process to get predictable results, so deliberate use of profiles is essential. In Photoshop, you can use the Convert to Profile command to move a file from one space to another, with a visual preview. You can then make any necessary adjustments before saving and uploading the final file.