Put a stop to that “Save For Web” color shift in Photoshop

Toning

Web browsers do not pay attention to color profiles by default (the exception is Safari), so you have to tone for the Web or you’ll get a color shift when you go from Photoshop to a Web browser making all your hard work toning moot.

Here’s how you set up Photoshop to tone for Web:

• In Photoshop, with your image open, make sure View / Proof Setup / Monitor RGB is checked. (See below for more info on this.)

• Then look to see if the proofing environment is active by making sure that View / Proof Colors is checked.

Now you are working with an image as it will look in a browser.

Save for Web

To save the images for Web, go to File / Save for Web & Devices and a new window will pop up.

• Click the 2-up tab to see the original and the Web version side-by-side.

• In the Optimize Menu (The arrow to the right of Preset.) make sure that Convert to sRGB is unchecked.
• Under Presets, select your file format and quality settings.
• If ICC is checked, uncheck it.

• When done, click Save at the top right.

The resulting image will look the same in a Web browser as it did in Photoshop.

More technical stuff

There is a difference in brightness between Macs and PCs. PCs have a gamma of 2.2 and Macs use a gamma of 1.8. This means that images on a Mac appear to be a little bit lighter than how they appear on a PC. When you selected the Proof Setup of Monitor RGB above, you essentially chose to split the difference between the PC and Mac gamma to tone at a 2.0 gamma.

With the release of Mac OS 10.6, Macs now use the 2.2 gamma. As time goes by, fewer users on Macs will have the 1.8 gamma and you can change Proof Setup to Windows RGB. Depending on what your analytics say about your Web site’s audience, you may be able to tone using Windows RGB now.

If you’re as weird as me and find this stuff fascinating, you can learn even more with this Web browser color management tutorial.