How Do I Prevent Color Change in "Save For Web"

Here are the basics. I have an image (CS2 8 bit RGB tiff 72 dpi) that has been created with blocks of web-safe colors (where possible). When I save it for the web as a sliced JPEG the blocks of web-safe colors shift. I'm not as concerned with the appearance as the actual RGB values. For example, a block of color as 102,51,0 is being saved for the web as 103,51,1.
I have tried this with color management on and off, saving as JPEG very high, high, etc. No difference.

Why won't it save as "safe" colors? I have tried bringing this same image into the "save for web" as a JPEG with the same results. Again, I am basing this on the actual shift in RGB values - not how it looks on screen.

I have done this hundreds of times but never encountered this problem. What is going on?

You need to be in sRGB before Saving for Web. One of the FAQs describes this. The FAQs are on the same page where you added this thread.

I am in sRGB. I have tried saving it with and without the sRGB colorspace and it makes no difference.

Is the colour shift even all over the colour block?

Can you post a link to the image?

WHat happens if you only do a save as?

It is an even shift.

What I don't understand is why it is replacing a web-safe color with a non web-safe color?

Here is a link to a smaller version of the actual file
<http://www.colsonartprinting.com/Dropbox/SiteBG.tif>

So called "Web-safe" color is pretty much an anachronism these days, left over from the days when the majority of web browsing systems didn't have the computational horsepower to display more than 256 colors.

The GIF format was the first image file type that was transmissible over the web, and it only allowed for 256 (or 216, if you account for Mac/Windows parity across browsers).

Now that most of the installed user base can view millions of colors of the systems, adhering to web safe color is more of a design decision than it is a design constraint.

If you're saying that you have what you call an even shift, then I suggest that you may need to recalibrate your monitor, and get to understand color management a little better.

For that, go spend some time at the following site, and look for articles on color management that are relvant to your system and version of Photoshop:
<http://www.computer-darkroom.com/home.htm>

The "appearance" of color shift is not the problem. I understand color management. It is the "actual" shift of color. It moves a solid RGB 102,51,0 to 103,51,1. Why? I check the color values while in the "save for web" space and they are correct. After the save they have shifted values.

What happens if you only do a save as?

And what are your colour settings?

I have done a Save As . .
..tiff - no change
..eps - no change
..jpeg (with and without compression) - color shift every time ..jpeg through Save for Web - color shift

Again, these changes are the actual color values not appearance. I have presented this experience to our support guy here in the shop and he is getting the same results on his computers without explanation.

.jpeg (with and without compression)

Just so you know. There is no such thing as a Jpeg without compression.

Right. Wrong choice of words. High to Low Quality compression on the JPEGs.

Sansabar,

Are you sure you are set to ACE (Adobe Color Engine) and NOT to Apple Color Sync or Apple CMM?

Could you post screen shots of your color settings?

Something is not adding up.

I agree.

Here is my normal working space
<http://www.colsonartprinting.com/Dropbox/cscpc.gif>

Here is my web working space
<http://www.colsonartprinting.com/Dropbox/csweb.gif>

Hi All,

I took a cutting of the brown edge in the linked TIFF file that has an RGB value of 102/51/0 and opened it in a new file in case the JPEG compression was making its calculations based on surrounding colours.

I opened it in Save for Web and went to 4-up optimisation. I set all 3 for output to JPEG format, and set their values to Max, Medium and Low. Doing this, the JPEG compression does change the colour value a little - you can read this at the bottom of the screen.

However - and this is the weird thing - using maximum compression, the colour values at the bottom are correct: 102/51/0 or Hex 663300, so I thought Photoshop would output the JPEG at those colours. When I clicked save however, then went and retrieved the compressed file from disk, the colour values for the brown had shifted from 102/51/0 to 102/50/0 even though the Save for Web dialog had indicated otherwise.

Using ACE engine, PS CS2. It looks like the colours are shifiting a tiny amount during the saving of the file as JPEG on my machine too. No idea why though ;)

Welcome to my world. It makes no sense.

Sansabar,

Indulge me for just a second. What happens if you save it as a GIF through Save For Web?

It renders the blocks of solid colors correctly.

Thanks for checking, Sansibar.

The reason I was wondering is that I saved your TIFF file to my desktop, tried Save for Web, and Photoshop WILL NOT let me save the file as a JPEG, no matter what I do. The only option in the Save For Web > Print dialog box is GIF. Period. Nothing else.

I cannot presume to explain this. I practically never do anything for the web, and I have never had a file containing slices.

So I am left with the memory of an astronomy professor at the university some fifty years ago who kept telling us "I cannot explain the universe to you, I can only describe it for you." :/

Of course, I was able to "Save As" your TIFF file in JPEG format, but NOT through "Save for Web".

Ramón, Open the file then open it in Save for Web...
Take the Slice tool (knife top left) and draw a marquee round the entire image so that every slice is selected. Then choose JPEG as your preset option on the right. This becomes the output type for every slice of the file. You can then select a slice and export it as an JPEG image. Why? Best ask your professor - I haven't a baldy!

Pat,

Best ask your professor

Hehehe… he was already a senior citizen then. I doubt he's alive some 50 years later. :)

I'm more than happy to take your word for the veracity of your above instructions, and I'm even happier that I don't deal with web stuff. Thanks for the enlightenment.

also, if

1) you have calibrated your monitor to 2.2. gamma, D65
2) you have Converted to sRGB

and you are still seeing a color shift in SaveForWeb, ImageReady -- or -- Photoshop Softproof (View> proof Setup: Monitor RGB)

then something else is going on... <http://www.gballard.net/psd/saveforwebshift.html>

Interesting.

Here are couple of screenshots of examples of the shift.

The first is the websafe save and the "color" of the selected brown. <http://www.colsonartprinting.com/WebColor/wc1.jpg>

The second is the actual "color" of the brown websafe save <http://www.colsonartprinting.com/WebColor/wc1a.jpg>

Interesting.
But pretty academic?
Why would anyone use jpg to Save For Web solid-colored graphics like you post? Use GIF; cleaner image and no RGB number shift.

well I must say the amount of variation is so insignificant its really not worth worrying about. Especially when most of the folk surfing the web have uncalibrated monitors.

That and they don't have the original file to compare it to.

OK, this is pure, unfounded speculation: I seem to remember either Chris Cox or Bruce Fraser saying that all color conversions go through L*a*b. If we could consider your "web safe" colors to be an index colored space that is being converted to sRGB, there could be rounding off errors involved.

"Why would anyone use jpg to Save For Web solid-colored graphics like you post?"

Because I can't get by with a GIF.

The actual image has many continuous color tones. It is the background image for an HTML table. The color surrounding the image is a solid Hex build. The problem? The solid hex build and the solid color of the JPEG line up and don't match, thus eliminating the illusion of a continual field of solid color.

Don't take this the wrong way, but I didn't come to the forum looking for opinions of how I should accomplish a given task, but why a particular task wouldn't give me the expected results. The answer may not be as evident as I hoping but let's not belittle the questioner.

What happens with PNG?

What if you change the background color to match the picture?

Didn’t mean to be little. Just a suggestion based on your posted example… which has no continuous tones.
Does your actual image lend itself to slicing? Saving solid color areas as GIF and continuous tone sections as JPEGS? (or would that just be another unwanted opinion of how you might a accomplish a given task. If so, I apologize in advance.)

PNG-8 resolves similar to a GIF which is unaccetpable.
PNG-24 resolves the numeric colors correctly but creates a file that is too large.

What if you change the background color to match the picture?

The continuous tone areas lap into the solid areas. The image is being sliced but I'm unable to separate them adequately to do as you suggested.

I appreciate the suggestions but don't want the original thread to get off track - Why does saving an already color compressed file as a JPEG cause a color shift in the actual numeric color values?

Sansabar,

The more I think about it, the more my post #25 begins to look like a reasonable answer to your question.

"What if you change the background color to match the picture? "

I have done this by encorporating a background image JPEG to create a seamless design.

I have solved the "web design issue" - that was what brought this all about. I still haven't been able to understand the reasoning for the color change via JPEG.

I am leaning to believe that it is something incorporated in all JPEG saves but only shows in specific situations or colors.

Just based on this short description of how JPEG deals with color/luminance (even prior to compressing), it does not surprise me that there is a shift in RGB numbers:

“First, the JPEG algorithms first cuts up an image in separate blocks of 8x8 pixels. Since the format is based on luminance/chrominance perception, it does not analyse RGB or CMYK colour values but instead converts image data to a luminance/chrominance colour space, such as YUV. This allows for separate compression of these two factors. Since luminance is more important than chrominance for our visual system, the algorithm retains more of the luminance in the compressed file.
The next step in the compression process is to apply a Discrete Cosine Transform (DCT) for the entire block. DCT is a complex process that is let loose on each individual pixel. It replaces actual colour data for each pixel for values that are relative to the average of the entire matrix that is being analysed. This operation does not compress the file, it simply replaces 8x8 pixel values by an 8x8 matrix of DCT coefficients.
Once this is done, the actual compression can start. First the compression software looks at the JPEG image quality the user requested (remember PhotoShop 'low quality', 'medium quality',...) and calculates two tables of quantization constants, one for luminance and one for chrominance. Once these tables have been constructed, the constants from the two tables are used to quantize the DCT coefficients. Each DCT coefficient is divided by its corresponding constant in the quantization table and rounded off to the nearest integer. The result of quantizing the DCT coefficients is that smaller, unimportant coefficients will be replaced by zeros and larger coefficients will lose precision. It is this rounding-off that causes a loss in image quality.”

source: <http://www.prepressure.com/techno/compressionjpeg.htm>

"The more I think about it, the more my post #25 begins to look like a reasonable answer to your question. "

I agree. In fact, it appears that charles badland has summed it up quite nicely. Thanks

However, to be a constant thorn - why would the JPEG compression change the image color of a solid? It seems to defeat the purpose of compression.

I think because of JPEG’s objective, which is to compress an image while keeping continuous photographic tones looking as good as possible. Retaining specific RGB numbers of solid colors is not a priority.

That's one of the reasons I avoid JPEGs as if they carried the bubonic plague.

I have the same issue, but it produces different results on 2 different computers and I'm not sure why. I have a block of color that is web safe (#99cc33), I save for web to jpg and it shifts to #9acd34.

On the other computer I open the same file and save for web to jpg and it stays #99cc33. Both photoshop versions (CS2) are set to the exact same color settings as well as the file being exactly the same. Is there a setting somewhere else I'm missing?

Further researching and I figured it out... an accidental press of cntrl-Y (probably while meaning to press cntrl-T) somewhere messed everything up.. switched workspace to proofing mode. Once I press cntrl-Y again it's back to normal and saves for web with the correct same web safe colors it started with.

sansabar- have you looked into this?