Color shift when save for web and devices


amachi

Senior Member
Jul 20, 2009
1,984
2
38
Recently calibrated my monitor and I am trying editing image on Photoshop. Everything is good until when I want to save the image for web and devices. As usual, I choose the option "Save for web and devices". Usually I simply save without changing anything else. But today, the preview from saving for web gives different color compare to my original.

Below is the screenshot.

5000622586_73a2a0a7a1_b.jpg


Any idea what's wrong with it? If under Preview, I choose "Internet Standard RGB" instead of "Monitor Color", the result is the same as my original image..

I am rather confused here :sweat: Not sure which is which :sweat:
 

Um, not really color shift.. It is more saturated hehe..
 

What is your working color space?

And do you see this difference in the 2-up preview in the Save for Web dialog?
 

Last edited:
I am using sRGB. The picture is taken in sRGB also. Below is the screenshot of 2-up preview.

5002567895_f3ac1a60d9_b.jpg
 

That's really odd. The left side of the 2-up should match what you're seeing in PS. I have no idea why this is happening.
 

Below the "convert to sRGB" checker box, choose "Internet standard sRGB(no color management)".
You're using a wide-gamut display. If you use a browser without proper color management support (eg. IE, chrome), you'll see over-saturated colors (like your screenshots); in firefox 3.6, if you leave the color mangement to default (2), only images with ICC profile tags will be managed; if you set it to (1), it will take all untagged images and color codes as sRGB and convert accordingly.
 

A few extra words on browser color management.
IE9 beta has a half-cooked CM feature, which converts tagged images into sRGB instead of monitor RGB for display. In other words, it disregards the color management between sRGB (windows standard color space) and the monitor space. Despite the effort in conversion, colors are still wrong because practically few monitors match sRGB closely.
On the other hand, due to the complications in CM adoption, few users actually care about color correctness. With the difference in CM support among browsers and users, I say we're not yet there to worry about what colors other people see.
 

Below the "convert to sRGB" checker box, choose "Internet standard sRGB(no color management)".
You're using a wide-gamut display. If you use a browser without proper color management support (eg. IE, chrome), you'll see over-saturated colors (like your screenshots); in firefox 3.6, if you leave the color mangement to default (2), only images with ICC profile tags will be managed; if you set it to (1), it will take all untagged images and color codes as sRGB and convert accordingly.

Hm, I am not so sure about the wide-gamut display, because I am using Dell E248WFP, and it's a TN Panel LCD.

Anyway, from your quote, it is recommended to choose "Internet standard sRGB(no color management)", right? BTW, since I am using sRGB color space, is there still a need to have "convert to sRGB" option ticked?
 

Hm, I am not so sure about the wide-gamut display, because I am using Dell E248WFP, and it's a TN Panel LCD.

Anyway, from your quote, it is recommended to choose "Internet standard sRGB(no color management)", right? BTW, since I am using sRGB color space, is there still a need to have "convert to sRGB" option ticked?

Dell says, "The Dell E248WFP features a 92% color gamut". This is considered pretty wide. sRGB should be about 72% NTSC gamut. But frankly, TN isn't good for photo and design work, not because of gamut but view-angle gamma problems.

I'm not recommending it. I'm saying it will give you near-identical colors in Photoshop workspace and save for web panel. All images intended for web are supposed to be in sRGB, tagged or not.
 

I still can't solve this problem yet. From what I see, CaptureNX, ViewNX and Photoshop CS will show the color as it is (as I expected). But if I view the image using Windows Picture and Fax Viewer or browse directly through the Windows Explorer, the color will be much more saturated, the same as what I see at the Preview of "Save for Web and Devices".

Yesterday, I tried this, save the image for web and devices, choose Internet sRGB. On my computer, using CaptureNX, ViewNX and Photoshop CS, I looked at the image, the color is ok, but viewing from windows explorer or windows pic and fax viewer, the image looks very saturated. I also uploaded the picture to facebook, from my computer's firefox browser, the color looks exactly like what is showing in CaptureNX, ViewNX and Photoshop CS5 but when I viewed it in my office computer, the color is more saturated :s

I also noticed that some of the pics that I edited previously and uploaded to facebook now looks a bit reddish on the face after I calibrated my monitor -.-"

Don't know what is wrong here.. sigh. As far as I know, I've calibrated the monitor as per instructed in Spyder Elite 3 software which is to get RGB difference of 0.5 and kelvin of 6500.
 

i don't know what is going on, because my fiance has that problem and i couldn't solve it. best part is my laptop didn't present such problems, so she started sending files to me to save for web.

anyways, what you need to know is that image viewer for windows is not color managed. so you shouldn't even use it to judge your pictures. you won't be the only one experiencing color shifts when viewing with that program.

if it looks alright in firefox, then it's fine, right?
 

i don't know what is going on, because my fiance has that problem and i couldn't solve it. best part is my laptop didn't present such problems, so she started sending files to me to save for web.

anyways, what you need to know is that image viewer for windows is not color managed. so you shouldn't even use it to judge your pictures. you won't be the only one experiencing color shifts when viewing with that program.

if it looks alright in firefox, then it's fine, right?

It looks fine in my home computer's firefox, but in my office computer's firefox, the color is more saturated (matches the one is showing up in preview for "save for web and devices").

My office computer is not calibrated, well although now I am not so sure now about the correctness of my calibrated screen at home. After calibration, I noticed some of my images becomes more reddish :sweat:

Below is the thread about my way of calibrating :sweat:
http://www.clubsnap.com/forums/showthread.php?t=763184
 

Last edited:
What color profile do you guys use in Photoshop?

From the website above, it mentions to "go to Edit / Color Settings" and change the settings to "Monitor Color". I am not sure what was set in my Photoshop at home, but I would like to hear from you guys too :)
 

i'm having such an issue too but dnt know whether the cause is the same.

my colors look diff from viewing them under PS, capture NX 2, firefox and windows picture manager.

for PS and capture nx 2, i've checked and the pics are using adobe RGB, rest no way to check and config.

so wat's wrg? my monitor is calibrated
 

The first image shows the problem that I can see: check the box "Embed Colour profile". Without this no decent colour-managed program can guess what kind of data are to be processed and which colour space to use for rendering the image.
In result, programs like Photoshop, Capture NX and other who were designed for image editing will display the colours properly (as what has been described / observed already). Programs like IE, Windows Fax / Picture viewer and other Shareware / Freeware tools are not colour managed. These tools simply ignore all information about colour space and just render according whatever the coders have put in. That's the reason for the odd colour reproduction. Solution: don't use these programs for any review of colours. They are fine for quick browsing, nothing more.
Something more to read and to check: http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html#
 

Thanks for the info, I'll go through it :)

Anyway, before I start experimenting with the settings in photoshop, may I ask what settings do you guys use for below stuff, and FYI, I am not editing images for uploading to web only but also for printing (in future):
1. Under Image > Color settings, what should I choose? By default, it is "North America General Purpose 2" and working spaces is sRGB. Should I leave this as it is? In my camera, color space is set as sRGB. I read somewhere that recommends me to change "North America General Purpose 2" option into "Monitor Color" instead.. Confused of which to follow.
2. Proof Setup > Monitor RGB --> Is this the correct option or should I choose something else?
3. Under "Save for web and devices", should the checkbox "Convert to sRGB" be checked? And I see an option to "Embed Color Profile" too. What does this do? What if I am using AdobeRGB, have this embed color profile checked, and I also choose convert to sRGB.

Sorry for the many questions, I read too much info and not sure which one to follow. Hope you guys can help shed some lights :) Cheers.
 

More questions.. I am getting more confused haha..

Let's say I have image with sRGB color space. In the "Proof Setup", I can choose "Monitor RGB" and when I click on "Proof Colors", the color in the image will change according to my monitor profile?

For me to start editing image, which one should I use? Color settings set to sRGB and proof setup set to sRGB, or color settings set to Monitor Color and proof setup setup Monitor RGB?
 

3. Under "Save for web and devices", should the checkbox "Convert to sRGB" be checked?
Cannot be wrong, even if your image is already in sRGB. The Internet "speaks" sRGB.
And I see an option to "Embed Color Profile" too. What does this do?
Please read my previous post including link. Feel free to google for "ICC Profile".
What if I am using AdobeRGB, have this embed color profile checked, and I also choose convert to sRGB.
The image will be converted to sRGB and the ICC profile for sRGB will be embedded.