Numerous users of Adobe's Photoshop Elements have had the frustrating experience of editing a photo, saving it, and uploading it to a Web site, only to discover that the colors - which look great in the original image - appear mysteriously washed out when the photo is viewed in a browser. I spent a great deal of time trying to track down this problem's cause and solution, and in the process learned tons of things I never imagined I'd need to know about color profiles, browser variations, and the peculiarities of Photoshop Elements' various methods of saving files. (And, to cut to the chase, I also learned that Elements itself can't actually solve this problem effectively, but that the less-expensive GraphicConverter can, if you know exactly what you're doing.)

If you've ever encountered this problem - or if you never realized you did, but do once I show you what to look for - I believe I can offer you some helpful advice. If you're in a hurry and don't want to read about French pastries and the nitty-gritty details of how color profiles work, you can skip ahead to "How You Can Actually Solve the Problem (with Caveats!)," but if you stick with me for some background information, I think you'll find it worthwhile. There are a lot of words here, but once you get everything set up as I describe, you can do the actual conversion of files into a working format in about two seconds, with as little as one click. You don't have to go through any sort of long process every time, but I think the more you understand what you're doing, the better you'll be able to adapt if and when things don't work just as you expect.

Cookshop Elements -- Long before I moved to France, I was a regular reader of David Lebovitz's blog. For a number of years, David was a pastry chef at the famous Berkeley restaurant Chez Panisse, founded by the legendary Alice Waters. Then he moved to Paris, where he has been writing books about desserts, giving chocolate tours, and blogging about his experiences in France (with, of course, an emphasis on food). And, being an intelligent and sophisticated person, he's naturally a Mac user.

Given our common interests in food (especially dessert), Macs, and Paris, I was keen to meet David, but for some reason I didn't manage to do so until this past summer, by which point I'd been here about two years. I went to a book signing David held at a local cookbook store, picked up an autographed copy of "The Sweet Life in Paris," and had a nice chat with him. When I mentioned what I do for a living, he immediately said, "Oh, then maybe you can help me with a Photoshop Elements problem I've been having." I assured him that I'd do my best - I'm an Elements user myself, my colleague and TidBITS Managing Editor Jeff Carlson has written books about it, and I would consider it a professional failure if I couldn't help solve some common technical issue with the program. I gave him my email address, and he later sent me details of the problem.

The problem he described to me - supplemented with sample photos and a long list of URLs pointing to online discussions among other Elements users having similar difficulties - amounts to the following. You have some great photo that you've retouched to perfection in Photoshop Elements (or another image editing program). The color looks lovely and vivid on your camera's display, in iPhoto, in Elements, and even in Preview. But by the time it gets onto the Web and appears in a browser, something has happened.

Compare the photo on the Web side-by-side with the original on your Mac and you can see that it has acquired a dull, flatter appearance. As you'll understand soon, the effect is a bit tricky to replicate in some setups, but I can offer an example image that shows the problem - the color as intended on the left side, and as it appears in Firefox 3.0 on the right. (Note that I say "as intended" rather than "original" because I deliberately altered the original photo to emphasize the problem.)

Now, depending on what sorts of photos you take and how you use them, this effect - if you even notice it - may not bother you at all. Furthermore, the effect doesn't occur with all cameras or file formats, and may depend on if or in what way you've processed the photo in Photoshop Elements or another program. But if you're, say, a professional food writer and you want to make sure your blog readers can see just how beautiful those ripe tomatoes or peaches are, it's a pretty big deal.

David had a hunch that he might not have been saving photos correctly - Elements has both Save As and Save for Web commands, which behave differently from each other, though both offer many options that can be puzzling for the average citizen. Fiddling with his saving procedure didn't help, though. After many hours of Googling, trying tips people had suggested on discussion forums, and contacting Adobe directly - the company claimed that Elements wasn't doing anything wrong and offered no further help - David was getting mighty frustrated and hoped I could find a solution for him.

At the beginning of my investigations, I had no idea what was causing this problem. David suspected Photoshop Elements was doing something wrong, but also thought the problem could have something to do with Flickr (where his photos were hosted), with the uploading process, or with his blogging software. So I first read what I could find about the issue on the Web and then did lots of experiments, starting with one of the photos in exactly the form it came from his camera. I processed it in various ways, saved and uploaded it in various ways, and displayed it in various browsers. Once I was able to replicate the washed-out appearance, I did quite a few more experiments to see if I could figure out what caused the problem and if there was some way to avoid it.

How Color Profiles Do (and Don't) Work -- As I discovered during my tests, the problem has to do with something called a "color profile" - which to that point I had only the vaguest notion of. Let me summarize some facts about color profiles that I gleaned from reading the various discussions of this problem David told me about.

The original JPEG image from David's camera (and from many other cameras) contains not only the raw data of an image - this pixel is this color, that pixel is that color - but also a chunk of metadata called a "color profile," put there by the camera, that specifies how a viewing program should interpret the colors. (The particular profile David's camera adds to its pictures tells programs viewing them to increase the saturation, among other things, so that colors look brighter and richer than what the raw image data would produce. Other cameras' profiles may behave differently.) Photoshop - regular or Elements - can read that profile just fine (it also lets you switch among various profiles, or remove a profile from a photo altogether), and so can Preview and Safari, so the colors look the way you expect them to when you're looking at the original image in any of those programs.

In addition, if you adjust an image in Photoshop (Elements or otherwise) and choose just the right combination of settings when using either Save As or Save for Web, you can make sure your saved or exported graphic also has an appropriate color profile, so that it'll again look perfect in all programs that correctly read the profile.

All this means that if you and the other people looking at your site always use Safari (which supports color profiles), the solution would be simple, because the only necessary step would be to make sure you have the right things checked or unchecked with whichever sort of save you happen to do. Then the color profile gets embedded in the saved image, and it looks the same in a Web page as it does in Photoshop Elements on your Mac.

But, of course, not everyone uses Safari. Firefox 3.5 (though not earlier versions of Firefox) is also supposed to read these profiles, although in my experiments it didn't do so consistently. (I haven't had any problems with the just-released Firefox 3.6, for what it's worth.) Meanwhile, Internet Explorer on Windows and most other browsers appear to ignore the profiles altogether. So, except for Safari users and a few other lucky souls with smart and up-to-date browsers, it wouldn't ultimately matter if you did all the right things to make sure the right profile is preserved and included when you save the image.

In short, although color profiles are a dandy idea in theory, and they're just fine as long as you stay within the camera/Mac/Safari universe, they may not help you at all when you step outside those bounds. No matter what you do, if you're relying on a profile to make an image's colors look the way you expect them to, and you view that image in a program that doesn't respect the profiles, they won't look right.

How One Should Be Able to (but Can't Really) Solve the Problem -- So, if you can't rely on a color profile, because a lot of programs just ignore it, then how do you get images to look like they should if the profile were being honored?

In principle, the solution is simple. Your photo editing software should remove the profile, but then modify the raw pixel data to give the colors the same boost that they would have received if the profile had been present and used. If this process were carried out, and it worked correctly, then the result would be that the image would look the same in any program. The image wouldn't have a profile, but it also wouldn't need one, because all the information provided by the profile would be merged into the original image. That way it would be irrelevant whether a browser ignored the profile.

Any reasonable person would assume that part of Photoshop Elements' Save for Web feature would do exactly this - merge the color profile into the image itself. But, it absolutely does not do so - and it's unclear whether it's not doing so because it wasn't designed to do that, or because it's broken. Either way, it doesn't happen.

Various Web sites proposed an assortment of occult procedures one can allegedly perform in Elements to persuade it to merge the color profile. I tried them all. I burned the incense, sacrificed to the appropriate gods and devils, bowed and prayed toward Mountain View, and also employed highly geeky trickery that wasn't even hinted at by any of those sites, but Elements staunchly refused to merge the profiles.

The full version of Photoshop has lots of extra thingies that, I'd been led to believe, might possibly fix the problem for real. But I don't have the full version of Photoshop to try it out, and anyway by this point I was fed up with Adobe and their uncooperative programs, and David had said he didn't want to shell out the cash for the full version of Photoshop anyway. So I started exploring other paths.

I tried several other image editors, including (of course) iPhoto and the spiffy Acorn, but they all behaved exactly the same as Elements. In fact, I even read that Apple's Aperture and Adobe's Lightroom have this problem! Technically, none of the programs is doing anything wrong - I mean, they leave the color profile in place if there is one, under what would in normal situations be the logical assumption that any program that needed to use the profile would do so. So, Adobe isn't exactly lying when they say there's no problem. Elements isn't removing any data or changing the image, it's just that it's failing to (offer to optionally) do something that's obviously necessary in the majority of real-world situations. And so is nearly every other photo editor. Thus, any of the above developers could make the argument that they're simply following industry standard behavior, although to do so would be to demonstrate oblivious indifference to their customers' needs.

How You Can Actually Solve the Problem (with Caveats!) -- Well, I kept looking and experimenting, and I eventually found one Mac program, Lemkesoft's venerable GraphicConverter ($34.95), that not only offers an explicit "Merge Color Profile" feature, but which, shockingly, actually works! I tested it a bunch of different times in numerous different configurations, and every time, it worked correctly. I could view an image in Safari, or Firefox, or whatever, and it always looked exactly like the original - bright colors and all. Yay!

In case you're unfamiliar with GraphicConverter, despite its name, it's actually a full-featured photo editor, with a range of features comparable to Photoshop. I told David he could stop using Elements and start using GraphicConverter if he wanted to, and could probably get the desired end result. However, I suspected he may react as I did, which was to look at the program's weird, and rather anachronistic, user interface, and go "Ack!" It's just not pretty. In fact, I find it rather obtuse once you get into anything slightly outside the norm. If you don't mind the interface and the learning curve, that's fine, but many people (quite understandably) prefer Photoshop's more modern and (usually) elegant approach.

The good news is that - going back to what the program's name suggests - you can set it up (after a fashion) to do drag-and-drop file conversion. So, you do whatever you usually do in iPhoto, Elements, or whatever, but then, after saving the file in Elements but before uploading it to your Web site, you drop it on an icon, let GraphicConverter do its thing (which takes about a second), and it spits out a file that looks exactly like the original but has the color profile merged into the image itself.

In just a bit, I'll explain both techniques: doing GraphicConverter's version of a Save As command that merges the profile, and setting things up so that you can just do the drag-and-drop conversion.

A Brief Detour: Making Sure Elements Saves Your Profiles -- For the process I'm about to explain to work, your photos must still have their color profiles. (The fact that an image looks right in Elements doesn't necessarily mean the profile is still intact, because Elements can apply its own version of a color profile behind the scenes when an image doesn't already have one. Grrrr.) If you've opened an image in Elements and done whatever you want to do to it, you must be sure to save it in a way that keeps the profile intact. You can do that with either Save As or Save for Web, but either way, make sure you do it. (And, if you've already accidentally saved an image without a profile, skip to the end of this detour for a solution.)

To keep a profile using Save As:

1. With an image open in Elements, choose File > Save As.
2. Make sure the Embed Color Profile box is checked and Format is set to JPEG. Make whatever other changes you want (name, location, etc.) and click Save. Set your preferred JPEG options and click OK.

To keep a profile using Save for Web:

1. With an image open in Elements, choose File > Save for Web.
2. In the Preset area in the upper right corner, make sure JPEG shows in the pop-up menu of formats. Below that, make sure the ICC Profile box is checked. Then (this is the highly non-obvious part) click the little button, which looks like a triangle in a circle, that's just to the left of the Help button (not the similar one in the upper right corner of the Preset area) and make sure there's a check mark next to Use Document Color Profile. If not, select that. Then make whatever other changes you want and click OK.

All of this assumes that the photo you're dealing with still has a profile embedded in it. What if a photo has already lost its profile? The actual pixels are no different, and it might look fine in Elements, but if you want the image to retain its appearance when it's viewed in most Web browsers, you must first reapply a profile and then perform a few other steps. Unfortunately, I don't know how to reapply the original profile from your camera. But, you can apply a different profile that's probably quite close, and that'll at least get you in the ballpark. Here's how:

1. With an image open in Elements, choose Image > Convert Color Profile > Apply sRGB Profile (not "Apply Adobe sRGB Profile"!). Note: If that menu command is unavailable, choose Remove Profile first, and then it'll be re-enabled.
2. Save the image in either of the above ways.

The "Save As" Method -- Allrighty. On to using GraphicConverter to merge profiles.

1. Open a photo (either one that's fresh off your camera, or one you've dragged from iPhoto, or one you've already messed with in Elements) in GraphicConverter. (The first time you open it, it'll prompt you to install a bunch of extra stuff, which you can either do or not. It doesn't matter, for our purposes. And, if you're running the demo version, without having paid for a license, you have to wait until a counter runs out before you can actually use the program.) If you feel like doing any further fiddling with the graphic, do so now.
2. Choose File > Save As.
3. From the Format pop-up menu, choose JPEG/JFIF (*.JPG, *.JPEG).
4. Check the "Merge color profile into image (for web usage)" box. Leave the other checkboxes as they are.
5. Name the file and navigate to wherever you want to save it, as usual.
6. Click Save.
7. In the dialog that appears, move the Quality slider to whatever you want, which is probably all the way to 100. Leave everything else set the way it is. Click OK.
8. Lather, rinse, repeat with any additional images.

The "Drag and Drop" Method -- This method requires some weird initial setup, but after that, it's just drag and drop.

The one-time-only setup:

1. In GraphicConverter, choose File > Convert & Modify.
2. The pop-up menu at the top should say Convert. If it doesn't, make it so.
3. Choose JPEG/JFIF (*.JPG, *.JPEG) from the Dest. Format pop-up menu.
4. Check the WWW Ready box if it isn't already checked.
5. Click the Options button. Drag the slider to the quality you want, probably 100. Click OK.
6. Check the Use Batches box if it isn't already checked, which it probably isn't.
7. Click the Edit Batches button. In the Batch window that appears, scroll down in the Possible Functions list on the left to Merge Profile into Image. Select that and click Add. Then, go back to the Possible Functions list, select Change Format, and click Add again. Now select Change Format in the Batch Table list, and a new Format pop-up menu appears at the bottom of the window. Choose JPEG/JFIF (*.JPG, *.JPEG) from this menu too. Click the Save button, type in the name "Merge", do not touch anything else, and click Save. Then click OK.
8. Close the Convert & Modify window.
9. Download an AppleScript droplet I wrote, "Merge Profiles," and put it in some convenient place, such as your Applications folder or your Desktop. (If it's still zipped - i.e., "Merge Profiles.zip" - double-click it first to unzip it.) This droplet tells GraphicConverter to use the "Merge" batch function you created in Step 7 to convert whatever files are dropped on it.

The actual use:

1. Drop one or more photos in need of a merged profile onto the "Merge Profiles" icon.
2. GraphicConverter will launch if it's not already running, and a dialog will pop up asking whether you want to rename or overwrite the file(s). Assuming you want to modify the actual files you dropped, click Overwrite for each one.
3. There is no Step 3. Your photo(s) have been converted.

Note that I could have written the script differently - so that, for example, it never even thinks about touching your originals and instead just copies the converted photos to another folder at the location of your choice. Then you'd be able to skip Step 2, but you'd have two copies (before and after) of each graphic, which may or may not be what you want. If you'd like something like that, you can of course modify the AppleScript droplet yourself - I leave the details as an exercise for the reader.

How to Prove to Yourself that this Whole Thing Is Working -- When all is said and done, you don't want to go through all this hassle only to find that you're still not getting the results you expect. So I suggest trying this quick test first just to verify that everything is working.

1. Take some original image from your camera that clearly shows the problem. (It seems to be most noticeable with bright reds.)
2. Open the image in Photoshop Elements and do whatever sorts of things you'd normally do to it.
3. Save the file (using either Save As or Save for Web - but being sure to include the profile, as described above).
4. Upload the file to Flickr (or your favorite Web-accessible location).
5. Open two browsers: Safari and Firefox 3.0.x (or any other browser that doesn't deal correctly with color profiles). Go to the Flickr page showing your newly uploaded image in both browsers, side by side.
6. You should see that the colors are correct in Safari but dimmer in Firefox.
7. Now take that same file you saved in Step 3 and drop it on Merge Profiles.
8. Upload the modified file to Flickr, and now open that image in both Safari and Firefox. You should find that they look the same.

Digestif -- After going through this elaborate effort of learning about profiles and developing this solution, I explained to David what I'd discovered. Understandably, he was perturbed that he couldn't get Elements - which he otherwise liked a great deal - to just do what it ought to do, and also disappointed that he'd have to pay for, install, and use yet another program. While I have nothing but sympathy for all those annoyances, my proposed solution was the best I could come up with.

A couple of months later, I ran into David again and he was excited to tell me that his problem had gone away - although not, alas, thanks to my solution. He'd decided to install the full version of Photoshop, and without changing anything in his workflow, he found that the problem no longer occurred (or, at least, was not nearly as noticeable).

This was a bit anticlimactic for me; I was glad he'd solved his problem, and although I didn't particularly care whether he used my solution or not, I still don't know what the full version of Photoshop does differently that apparently ameliorates the problem - or why that capability, whatever it is, is absent in Elements. Still, I got to cross "Meet David Lebovitz" off my 2009 to-do list, and learned quite a bit about graphics, so I count the whole undertaking as a success. And, if my discoveries can help anyone else with the same problem, that is, as they say, the icing on the cake.