Update August 28, 2006 -- I am again questioning the ability of Photoshop Elements 2 to produce remotely accurate colors using Save For Web. I'm following my own instructions, starting with sRGB IEC61966-2.1 documents, and getting the dull colors again. This is rather disheartening. I'm leaving this discussion up here because it did work for me once, but there must be a something more subtle I'm continuing to miss. Maybe someone will see article and be able to shed some light on the issue.

At ShooFlyDesign, we do all kinds of web work. One very common bit of work is converting other people's designs into working websites. As a result, we receive lots of Photoshop documents. Because we're working with graphic designers who are very careful with where they pixels are placed, and how they look, color is not something to be trifled with. This is true in any somewhat artistic endeavour -- everyone wants the colors they choose to look the same wherever the document is reproduced.

Because we're interested in keeping our costs down, ShooFlyDesign has not invested in Photoshop CS or any of the other full versions of that venerable software. Virtually all our work is done for the web, and Photoshop Elements does the job admirably for a small fraction of the cost of Photoshop. We use version 2.0, which was the first version to run natively on Mac OS X. It's not the current version, but so far we haven't needed to upgrade. Elements can't read or save CMYK images, and is missing many of the advanced automation and image adjustment features of the full version of Photoshop. But for most people, it has plenty of power, and with certain add-ons, it can be very powerful indeed.

Although we don't need to deal with CMYK images in Photoshop, we do need to be able to output accurate color to the web. Photoshop Elements includes a Save For Web command, but if you're not careful, the images it saves will have colors that look desaturated and rather dull. I'm certainly not the first person to notice this. The difference isn't the same as the difference between color and black and white, but to a reasonably discerning eye, it's pronounced.

The reason, I think, is that Save For Web strips out the ICC color profile information from your original document (the information that tells Photoshop how to render color on your screen) when saving to JPEG, GIF, or whatever¹. Most web browsers ignore color profiles (Safari is an exception), so stripping them out is generally a fine thing to do. Photoshop Elements has the ability to save the image without the ICC profile, looking the same as your original, but only if you follow certain steps. This has been a source of many headaches over the years, but finally, I've figured out a procedure that lets us output correct colors from Photoshop CS2 documents.

The Procedure -- How To Keep Your Colors Looking Good

There are two main variables you need to control:

1. Photoshop Elements' Color Settings preference, found in the Photoshop Elements menu in Mac OS X. Set it to "Limited Color Management". Doing so will tell Photoshop Elements you only care about the sRGB color profile, which is the one used for keeping colors consistent on the average person's screen, across computer platforms (Windows, Mac, etc). I was inclined to think that "Full Color Management" would also work, but alas, it seems not to. It seems to me the three available modes (None, Limited, Full) might have been better named "Always Ignore", "Always Use sRGB", and "Always Use Adobe RGB".

2. The source document's color profile. This should be sRGB IEC61966-2.1. Although Photoshop Elements can open and work with any RGB document, if you start with Adobe RGB, there's nothing you can do to save that image to the web that will preserve the original colors². The full version of Photoshop can convert between profiles easily, so if you're working with other designers, ask them to work in sRGB.

Once these two things are under control, you can use the Save For Web command to yield color as accurate as Photoshop (any version) can produce without ICC profiles embedded. I tested this in my copy of Photoshop Elements, and a copy of Photoshop CS2 belonging to a less frugal colleague, and the results are identical.

What Can Go Wrong

If you start with Adobe RGB, you get dull colors. If you work in Full Color Management mode, regardless of the color profile you start with, your colors will be dull after you Save For Web. That part, in particular, is just amazing to me -- if Limited Color Management can do it starting with sRGB, Full Color Management should be able to do it too. Unless there's some subtlety to color management I'm missing, this is a bug.

For the record, in Photoshop CS2 (and probably earlier versions), you don't need to fuss with all this document ICC profile, color management setting nonsense. The full version of Photoshop will apparently do whatever it needs to do internally to make your images look right on the web. You can start out in Adobe RGB -- CS2 will change the profile internally and match the colors as best it can when saving the image. It's really irritating to me that Photoshop Elements (as of 2.0 anyway) doesn't have this particular aspect of Photoshop's brain. Perhaps Photoshop Elements 4, which is presumably based on CS2, has fixed this behavior. If it has, and it's not any slower, I will have a very compelling reason to upgrade. Alas, as of today there is no downloadable trial of Photoshop Elements 4 for the Mac available, so I can't test it.

Two More Things

To add to the potential irritation, the procedure can be slightly different if you're working on documents you create yourself. New documents created in Limited Color Management mode will not have an ICC profile attached. This means the whole business of ICC profiles as used by Save For Web can be safely ignored, because there's no profile to strip. However, if you use bits of other images with color profiles, you'll need to switch to Full Color Management before copying those pieces into your new Photoshop Elements document, or the colors will be imported into your document looking dull. With Full Color Management turned on, Photoshop will confirm that you want to copy, say, a bit of image in Adobe RGB into your sRGB or untagged RGB document, and that you want Photoshop to try to convert the colors to match. If you have Limited Color Management turned on, you won't get this opportunity. Once the other image is imported into your document, you can switch back to Limited Color Management.

When I first started noticing this problem, I would copy the image slices I was working with into GraphicConverter and use its "Merge color profile into image" checkbox in its Save dialog. This effectively does the same thing that Photoshop CS2 does when you Save For Web there -- it matches the colors as best it can to their untagged, non-color-managed equivalents. And GraphicConverter is even cheaper than Photoshop Elements! If you have no choice but to use Adobe RGB originals, GraphicConverter might save your bacon. Its results are not quite as accurate to my eyes as Photoshop or Photoshop Elements configured the aforementioned way, but they are definitely much better than Photoshop Elements configured incorrectly.