In Focus Vol. 3 No. 12

Q: Why do my images look so different when they get uploaded to websites?

A: There are so many things that could affect the final outcome of your images when they are uploaded to the Internet, but the color space is most often the culprit.

By Kim Herrera

Adobe Certified Expert, Photoshop

It's like asking why does pizza taste different in the U.S. than it does in Italy. There are so many variables. If we are talking about Web images then we need to be aware of the color space we are working in. Of course it would help if you calibrate your monitor first.

sRGB is the most common RGB color space. Currently being used as the default for many scanners, consumer grade digital cameras, HD video cams, computer monitors and HDTVs, as well as being endorsed by other software and hardware manufacturers.

Adobe Photoshop describes it as the "ideal space for Web work, but not recommended for prepress work because of its limited color gamut.”

When preparing to tone your images for the Web or to hand over to a client who will be using them for Web work, make sure to set up your Photoshop color settings for the Web.

It's very important to note that once you go through the following steps, every image brought into Photoshop will be coverted to the relatively tiny sRGB color space. If you're not working on images that will be used on the Web, but will instead be used for print, it is imperative that you change the color management policies back to Preserve Embedded Profiles.

For more information on color settings for printing house, click here.

If you are using CS or CS2, Go to Photoshop>Color Settings

If you are using CS3, Go to Edit>Color Settings

Then in the Color Settings dialog window under Working Spaces: RGB, scroll down the menu options and choose sRGB IEC61966-2.1.

Further down under Color Management Policies, select Convert to Working RGB.

These settings will allow you to tag your images with this Web-specific color profile. Tagging your image with an sRGB profile increases the possibility that more monitors will correctly display the colors in your image. Save your new color settings as Web Setup as you will only want to load these when toning images for web.

The additional step that I've found crucial to toning for the Web is previewing the images I create in my browser software. It doesn't matter if you are PC or Mac or using Explorer or Safari or Mozilla software; you must preview your files to see if you are going in the right direction.

Doing this step has given me the best results and a greater understanding of toning images for the Web. It is unlike any other type of color correction that I do in Photoshop. It's all about looks and previews and not about numbers and readings, which was somewhat foreign to me in the beginning since I work by the numbers.

So go ahead and open any image with your new color settings in Photoshop. If you take a look at these two images you will notice a color shift. The one on the left uses an sRGB profile and the one on the right uses Adobe RGB. (This, of course, is theoretical since technically they are both now using the sRGB profile space and you are viewing from a Web browser and not Photoshop).

You can however, instantly see that one is more saturated and may or may not look good on your monitor. By using a smaller color space you increase the chances that the blue you are looking at is the same blue or red that everyone else is looking at.

Save your image for Web.

Go to File>Save for Web.

The web-optimizing dialog window appears. Make your choices. I've chosen a simple JPEG output. Click Save.

Keeping your image open in Photoshop in the background, open the saved image in any Web browser software. Go to File>Open and navigate your desktop hierarchy to you newly saved file and open it. If the image needs adjusting, pop back over to Photoshop and bump the levels or saturation and resave.

Wait a couple of seconds and refresh your browser window to preview the latest changes. (If it doesn't load, you may have to redo to File>Open command).

This back and forth action really does give you the best chance at achieving desired results and taming the beast known as the World Wide Web. Cheers!

Kim Herrera, Adobe Certified Expert, Photoshop, is the color management expert for Logan Photography at Studio Exchange, Santa Ana, Calif., and runs KCH Digital, a digital artistry, education, and consultancy firm.