Color shift when saving for web

[Harley Goldman]

I am getting a very noticeable color shift when I save scanned images for the web. I am using CS3 on a new Mac Pro with adobe RGB workspace. My work flow is as follows:

1. Flatten layers in master file.
2. Convert to sRGB
3. Convert to 8 bit
4. Downsize and sharpen
5. Save for Web (optimized is checked, tried both ICC checked and unchecked)

When I upload the saved image to the web, there is a significant color shift. I also see the same shift if I open the jpeg in CS3 and use the default profile. If I open it and assign it the sRGB profile, it looks fine. Seems something is getting mangled in the assigning of the sRGB profile.

Any suggestions?

[walter23]

I've had this problem too, and near as I can figure the problem is that while sRGB is the standard for the web (ie, windows browsers), it's not the standard colour space for macintosh.

Mac will use some other colour space. Photoshop is colour aware and will convert sRGB or Adobe RGB or whatever to look reasonable on your monitor, but firefox is not colour-aware and so will assume your document is in the native colour space (whatever your mac is using). In practice this means your sRGB files will not look right to you (but will look correct to all the windows users out there). You can test this by using a colour-aware browser like Safari instead. In Safari your images should look close to how they appear in photoshop.

I don't do a lot of printing from digital right now, but if / when I start I'm going to forget about how things look on the web and focus on nailing down my print output. You could consider web the same way - make sure it looks close to correct in Safari and use that to calibrate your workflow. You could check it on a windows computer or something too if you're concerned about how it will look to the other 90% of web users.

[cyrus]

Are you saving the file as a PNG? There are color management issues on both Safari and IE. Some reports of JPG too.

[Marko]

When I upload the saved image to the web, there is a significant color shift. I also see the same shift if I open the jpeg in CS3 and use the default profile. If I open it and assign it the sRGB profile, it looks fine. Seems something is getting mangled in the assigning of the sRGB profile.

You have actually provided the answer to your own question here! What you are describing is exactly what should happen - it looks fine when you assign it the profile it was saved in and it doesn't when you assign it a default profile. That's color management at work right there.

Your workflow looks right provided that you actually convert the image to sRGB color space and not simply assign the sRGB profile, but only if your image is NOT already in sRGB. Converting an image which already has an sRGB profile assigned to it to sRGB color space will definitely shift colors.

Next, how exactly do you convert to sRGB color space? I use Black Point Compensation (checked) with Relative Colorimetric Intent and choose to embed the ICC profile into the image when Saving for Web and I haven't experienced any shifts so far. ICC-aware browsers will use the information to display your image correctly, while the others will simply ignore it.

Also, I would leave converting to sRGB and then to 8-bit as the very last two steps, after resizing and sharpening. This is minor, but you still lose some data during resizing and sharpening, so it is better to have as wide base as possible for it.

[Andy Eads]

There is another answer buried in your question. You picked "optimized". Optimized color is a very small subset of colors that were used when it was quite expensive to generate color from a computer. For most business purposes, a set of 255 colors was adequate. For many years the technology advanced through several specialize color spaces such as TGA (Targa). The current ICC standard allows for very good color representation between devices. But, optimized color defeats the whole thing.

[BennehBoy]

Don't use save for web, once you've converted to SRGB, just choose Save.

[neil poulsen]

What software are you using to upload you webpage and images?

I've used iWeb and have the same problem.

[Ken Lee]

I would be surprised if the upload software did anything to the files. I think Marko has nailed it: you need to convert your images to sRGB before posting them. Otherwise, what you see, is not what others will see.

Browsers such as IE and Firefox do not support embedded color profiles. Their rendering engine shows everything in sRGB, and ignores any embedded profiles.

Browsers based on the WebKit rendering engine, such as Safari and OmniWeb, support embedded profiles, and like Photoshop, will show you the image in the color space specified in the embedded profile. Safari has been recently ported to Windows, so graphics professionals can use Windows if they like, and have a browser which will support a "professional" workflow.

A fun page to visit - with different browsers - is the Color Space Tutorial. Move the mouse over the images, and you will see if your browser supports profiles or not.

Another important point is that you should make sure your monitor is set to a Gamma of 2.2 - even though there exists an "Apple" standard Gamma of 1.8. Experts such as Chromix recommend this for Mac users, in their instructions on calibrating monitors.

[neil poulsen]

Another question, are the images saved as JPGs? I noticed that you don't specify.

I know that I save my images as sRGB converted, 8-bit JPGs files, and they look quite a bit different displayed on the web than on my computer. So, this leads me to believe that it's either something happening with the web software or with the host software.

[Ken Lee]

When you say "displayed on the web", which web browser ?

When you say "on my computer", which file viewer ? Photoshop ?

Which operating system ? On Windows, you can create an image in Photoshop, and then try to view it in IE or Firefox, and depending on the settings in Photoshop, you can be almost guaranteed to see an unintended difference between the two.