Why do color change when Save for Web

GH
Posted By
Gernot_Hoffmann
Jul 13, 2008
Views
652
Replies
19
Status
Closed
Sorry, test was wrong.
‘Optimized’ doesnt change the image so much.
G.H.
Related Tags
change color save

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

CB
charles badland
Jul 13, 2008
Calibrate your monitor.
I
ID._Awe
Jul 13, 2008
Part of this has to do with compression.
CB
charles badland
Jul 14, 2008
You should not see that kind of color shift due to compression. His monitor profile needs to be adjusted.
GH
Gernot_Hoffmann
Jul 14, 2008
Three tests:
The monitor profile is sRGB. The monitor was
adjusted manually very near to sRGB.
The source-image is a sky with clouds, nice in sRGB.

A very wrong monitor profile was chosen: ProPhotoRGB.
Photoshop was loaded & started again (!).
The image sky looks now purplish.

Test1:
Save for Web, 2-Up. The original image (left) and the
JPEG are looking alike and like the source-image.
NOT purplish.
It seems that the data are sent to the monitor without
going through the monitor profile.

Test2:
Save as JPEG. The JPEG looks purplish like the source
image. It seems that the source image and the JPEG are
both sent to the monitor through the monitor profile.

Test3:
Remove the purple tint by Curves (less Red, more Green). The new source image looks reasonable (but the monitor
profile is ProPhotoRGB).
Save for Web, 2-Up. The original image (left) and the
JPEG are looking alike but more greenish-cyanish than
the source-image.

We have a couple of rather complex situations:
1. The monitor adjustment is wrong (not tested, would be obvious in a not-colormanaged environment). The profile
is either correct or wrong.
2. The monitor is correctly adjusted, but the profile is wrong (Tests 1-3). The results are different for Save for Web and Save as JPEG.
3. The monitor is correctly adjusted and the profile is
accurate. Should be achieved (how trivial!).

Would be nice if somebody could confirm the tests.

Best regards –Gernot Hoffmann
RA
Richard_A._Ross
Jul 14, 2008
My monitor is calibrated using Eye-One match.

Regardless of whether the monitor is calibrated, the color should not shift. But the "Save for Web" to jpg appears to change the rgb value of the pixels. I must be missing something.
CB
charles badland
Jul 15, 2008
I’d create a new profile and see if that makes a difference.

What is your preview choice in the SFW dialog (e.g. Uncompensated Color) and/or
Are you using one of the newer "wide gamut" monitors?

Regardless of whether the monitor is calibrated, the color should not shift.

um, wrong. A hosed monitor profile can absolutely cause what you are seeing.
GH
Gernot_Hoffmann
Jul 15, 2008
Richard,

perhaps you’re missing the additional settings
in a sub-menue which is accessible by the triangle
in the top row at 75% width in Save for Web:
1 Uncompensated Color
2 Standard Windows Color
3 Standard Macintosh Color
4 Use Document Color Profile

This isn’t easily understandable. For instance,
the working space is AdobeRGB(98), the image is
in sRGB but untagged. What means (4) then ?

‘Creating a profile’ isn’t enough. The monitor
has to be calibrated (adjusted) and characterized
(profiled). Both workflows can be wrong.
The calibration can be tested by test patterns:
<http://www.fho-emden.de/~hoffmann/caltutor270900.pdf> or the HTML-version which doesn’t require color settings in Acrobat.

Best regards –Gernot Hoffmann
DM
Don_McCahill
Jul 16, 2008
Regardless of whether the monitor is calibrated, the color should not shift

Yes it should. That is what calibration does.
RA
Richard_A._Ross
Jul 17, 2008
perhaps you’re missing the additional settings in a sub-menue which is accessible by the triangle

Ok,if I choose "Standard Windows Color" or "Use Document Color Profile", the color match. But now view the saved jpg file inside web browser, the color still doesn’t match the photoshop vesion:

What is the exact workflow to get a browser viewable jpg file from photoshop and have the color match?
CB
charles badland
Jul 17, 2008
again..
1. Is your monitor a "Wide Gamut" monitor? Y or N
2. Have you re-calibrated since your first post? Y or N
NA
Not_Ann_Shelbourne
Jul 17, 2008
Do you have Firefox 3 and color managed image display turned on?

By default, it is off.

Most folks do not have a color managed browser.
RA
Richard_A._Ross
Jul 18, 2008
I have narrowed my problem down to Color Settings (Shift+Ctrl+K). My original setting is "North America General Purpose 2". If I change it to "Monitor Color", then Photoshop color changes and match browser and Windows Preview.

Matching color in browser is good but the color look dull. What setting should I use? My file can both output to CMYK printer and for web viewing.

charles:

1. Is your monitor a "Wide Gamut" monitor? Y or N

No, it a HP laptop.

2. Have you re-calibrated since your first post? Y or N

Yes, I just did it again.

Not Ann:

Do you have Firefox 3 and color managed image display turned on?

I’m not using FF3 because I am using some add-on not available in FF3 yet. But I have Safari and it’s color managed. It display my image identically to FF2. This make sense to me because I’m using sRGB color profile.
CB
charles badland
Jul 18, 2008
I have narrowed my problem down to Color Settings (Shift+Ctrl+K). My original setting is "North America General Purpose 2". If I change it to "Monitor Color", then Photoshop color changes and match browser and Windows Preview.

Yep. And using "Monitor Color" as your editing space will ensure that images look proper to you… and no one else.
CB
charles badland
Jul 18, 2008
This make sense to me because I’m using sRGB color profile.

You’re including the ICC profile in the image? Try unchecking that and see if it makes a difference.
RA
Richard_A._Ross
Jul 18, 2008
You’re including the ICC profile in the image? Try unchecking that and see if it makes a difference.

I’m not embedding ICC Profile.

So I tried with ICC Profile checked and I think I may have my answer. With my Color Settings to "North America General Purpos 2", Safari display the color exactly as Photoshop.

So my conclusion is:

File must be tagged with "ICC Profile" and view in color managed browsers like Safari to match the color in Photoshop. IE and Opera are no good.

And no ICC profile does not mean sRGB is used, at least as far as Safari goes.

–
I did a little experiment. For a given color, how do the web browsers display it as html code and in a jpg image?

First, I create a 200px by 200px Photoshop document and fill it with the sky blue rgb(1,74,128). Save for Web to "blue.jpg" with ICC Profile. I then created a html doc to show a patch of color rgb(1,74,128) in a rectangle (using css background-color property). Below it, show the "blue.jpg" image. I view the html doc in FF2 and Safari:

FF2 display the html color rbg(1,74,128) and blue.jpg image the same and it’s different from Photoshop. Safari display the html code color the same as FF2. But the color in "blue.jpg" match Photoshop.

I installed Firefox 3 and turn on color managed: all color match Photoshop: html color, blue.jpg with ICC Profile, blue.jpg without ICC profile. I guess FF3 uses my monitor profile and adjust color display accordingly. And it appears FF3 default to sRGB when there is no ICC profile.
CB
charles badland
Jul 19, 2008
Criminy… it still seems like a bad monitor profile to me. I’m a Mac person… on Windows don’t you have to "load" a new monitor profile on start up? Or something like that? Make sure that PS is accessing the latest monitor profile to understand its display environment. (I DON’T mean setting Monitor Space as its editing space.)

No, it a HP laptop.

You know, on my Powerbook laptop I do get some color inconsistencies on SFW that I’ve never worked out. Not as extreme as yours, but still off with certain colors.
B
Buko
Jul 19, 2008
Don’t laptop monitors really suck to begin with?
CB
charles badland
Jul 19, 2008
I thought there was a topic, a year or two ago (on the Mac side), about laptop monitors and SFW color problems.
P
Pipkin
Jul 20, 2008
Maybe this would be a bit useful "Why color changes when Save for Web, ImageReady, and or the internet?"
<http://www.gballard.net/psd/saveforwebshift.html>

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections