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 (http://www.omnigroup.com/applications/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 (http://www.gballard.net/psd/srgbforwww.html). 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 (http://www2.chromix.com/index.cxsa)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.

[Marko]

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.

Neil,

Host software simply responds to the client (browser) request and sends the pages and files over, usually as a binary transfer. It does not modify any of the files in any way, it's not supposed to, just like your post office or your mail delivery person do not alter the content of your mail. Ditto for your FTP software - the one you use to transfer your local files to your host.

The main task of a web browser, on the other hand, is to request the content from the host and then to interpret and display what comes along. It follows certain set of rules and renders HTML as readable pages and images (.jpg, .gif or .png) as bitmap patterns that we see as images. Most browsers are hardwired for a single color space/profile combination and are oblivious to whatever profile might be embedded into the image file, while others, such as Safari, are ICC-aware and either interpret the color profile of the image if they find one embedded or use the default color profile of the host system.

The link to Color Space Tutorial that Ken provided is an excellent and very understandable source written in simplest possible terms.

[Harley Goldman]

Thanks for the input and suggestions.

btw, I always use "convert to sRGB, NOT assign.

I have now tried saving the image as a jpeg using "save as", saving for web with optimized checked and unchecked and with ICC profile checked and unchecked. The result is the same. I am posting the image to a portfolio at Naturephotographers.net, viewing using Firefox, version 2.0.0.0.14. I opened IE using VMWare and the image looks the same, with the color shift.

If anyone has any other suggestions, like Ross Perot, I am all ears.

[Marko]

btw, I always use "convert to sRGB, NOT assign.

I have now tried saving the image as a jpeg using "save as", saving for web with optimized checked and unchecked and with ICC profile checked and unchecked. The result is the same. I am posting the image to a portfolio at Naturephotographers.net, viewing using Firefox, version 2.0.0.0.14. I opened IE using VMWare and the image looks the same, with the color shift.

Neither Firefox nor IE are not ICC-aware, both rely on the OS for color management. If you are seeing a color shift with these browsers, then it is likely that your images are not being correctly converted. So, let's review the workflow once again:

1. You need to use "Convert to sRGB" ONLY when your original image is NOT in sRGB. If it is, then you need to assign the correct profile, otherwise you'll end up with a color shift.

2. Do NOT use "Save As" because you'll end up with larger and possibly even incompatible files, since this option saves additional information with the image, such as Windows and/or Mac thumbnails (these are separate and you can have both) or even full size preview (for some OS's).

Do use "Save for Web" as this option gives you the most precise control over the optimization process.

3. Per Andy's explanation, Do NOT use "Optimized".

4. Whether you attach the ICC profile or not will not make any difference for your browsers, only for the ICC-aware ones.

If you are still seeing a shift, then you probably have an underlying OS display issues. Try viewing your portfolio from another computer, possibly a Mac with Safari.

[Harley Goldman]

Marko,

Thanks for the input. My workspace is adobe RGB. I use convert to sRGB to assign the correct profile. I have always used "Save for Web", and only tried "Save As" at the suggestion above.I stopped using Optimized after reading Andy's explanation.

I will keep plugging along to see if I can come up with any other explanation. Appreciate the help!!

[Jon Shiu]

Just fyi, the explanation of "optimized" explained above is in error, and it is the default setting for save for web as it will not change the appearance of the file, just the encoding: http://www.impulseadventure.com/photo/optimized-jpeg.html

Jon

[Marko]

Harley, you're welcome. Having looked at your website, you have great images there!

Marko

[walter23]

i believe the problem is that Mac OS X does not work in sRGB space. sRGB images will not render correctly in OS X unless you're using a colour-aware browser or program (like photoshop) to view them.

This is similar to how adobe RGB is not the native space used by Windows. If you use a program that ignores color profiles (like most web browsers) your adobe RGB files will look washed out. It's the same with OS X and sRGB: the native color space / profile is not sRGB and stupid programs that don't care about profiles will just display those alien sRGB files in the native space.

And now a practical suggestion:
In OS X, go to Applications : System Preferences : Displays : Color and look at which profile is currently selected. In my case it's "Color LCD Calibrated" (on my macbook). Then go to photoshop and convert to that profile instead of sRGB. Upload to the web and view in your (non-color-aware) webbrowser and it will look exactly the same as in photoshop. Of course, now it's broken for everybody on the web who uses sRGB, so this isn't a good practice in general :)

If you use Safari for looking at images, your sRGB images with profile information embedded should look perfectly fine. It's only non-aware browsers that have problems.

This might just be an issue with the notebooks. I had the problem with my iBook G4 and now with my macbook. I've never used a mac desktop, so I've no idea if they use sRGB or not.




Neither Firefox nor IE are not ICC-aware, both rely on the OS for color management. If you are seeing a color shift with these browsers, then it is likely that your images are not being correctly converted. So, let's review the workflow once again:

1. You need to use "Convert to sRGB" ONLY when your original image is NOT in sRGB. If it is, then you need to assign the correct profile, otherwise you'll end up with a color shift.

2. Do NOT use "Save As" because you'll end up with larger and possibly even incompatible files, since this option saves additional information with the image, such as Windows and/or Mac thumbnails (these are separate and you can have both) or even full size preview (for some OS's).

Do use "Save for Web" as this option gives you the most precise control over the optimization process.

3. Per Andy's explanation, Do NOT use "Optimized".

4. Whether you attach the ICC profile or not will not make any difference for your browsers, only for the ICC-aware ones.

If you are still seeing a shift, then you probably have an underlying OS display issues. Try viewing your portfolio from another computer, possibly a Mac with Safari.