Why are the colors on images I upload to the web different?

Rating: +0

Positive Negative

Before you start assuming you have a color problem, you must make sure you are making a valid comparison.

1. Use the same browser to compare images. You cannot compare one image in Safari and another in IE if the image is using any color space other than sRGB.

2. Do not compare Internet Explorer browser image against an image in Photoshop or another color space aware viewer. Most browsers are not color space aware and Photoshop and many image viewers are color space aware.

3. Do not compare image between web sites. The background of a website will influence how you perceive color. See more below.

This question comes up often. The most common reason for a color shift is using the wrong color space for a web image. With the exception of Safari (and soon Firefox 3), web browsers are not color space aware. This means that if your image is using Adobe 1998 color space, the web browser will not interpret it properly and the colors will appear muted and washed out. To fix this problem, you need to first understand color space and then covert your web images to sRGB prior to upload. The easiest way to do this in Photoshop is to Save for Web. Alternatively, you can go to Edit-Convert to Profile and select sRGB and save the file.

If you have confirmed that both images are using sRGB color space and you are still convinced that the colors look different, you may be dealing with a visual perception problem. How our eyes see color is heavily influenced by the colors surrounding it. It is not valid to compare an image's color while it is displayed on two different backgrounds. For a valid comparison, you must first download each image into your hard drive and then drag and drop each image into a new browser tab rendering it in a window with a white background. Only then can you compare the color values of each image side by side. Don't believe me? Consider these examples and you will change your mind.

For the most part, resizing and jpg compression does not change color values in a perceivable manner. Nor does saving the file in tiff vs. jpg.

The same principle applies to printing. Most commercial photo labs who use Noritsu and Fuji Frontier printers are not color space aware and will use sRGB or no color space. Convert your images to sRGB before sending them to the lab. Some custom labs may give you a custom color profile to use when preparing your images. For home printers, the printer must be color calibrated with the paper you will be using. Each type of paper and ink requires a different color profile.

Keep things simple.

Start by buying one of these.
Pantone-Eye-One-Display

X-Rite-Eye-One-Display-Lite

Create a color profile for your monitor. That is the color monitor profile you want to use.

To keep things simple if you are not going to do offset printing, set your working color space to sRGB and convert to working color space for management policy.

Look here for more information on color management.