Is your working space sRGB?
This is normal behavior for Photoshop, or any color managed application. There are ways to guard against it. The root of the problem is that jpgs are color managed by Photoshop, while the web background is not.
You may be able to do an end run around the problem by using a transparent png image instead of a jpg. If you want to stay with a jpg image, the simplest solution is probably to turn Color Management off in the drop-down in PhotoShop’s Color Settings (accessed via ctrl-shift-K). Another possibility is to assign (not convert) your image to your monitor profile.
It is also highly advisable to use sRGB as your working space. Do not embed a profile if it is important that the jpg’s colors match the non color managed objects on the web page.
If you do embed a profile – for example the sRGB profile, then color aware browsers will convert your jpg images to the user’s display profile, and the person viewing your web page may see a mismatch between your carefully prepared jpg and the background.
It is conceivable that certain color managed browsers will default your image to sRGB, and perform a color conversion even without a profile, in which case you will see a mismatch no matter what you do. If that happens, you may be able to do something tricky, like use a scaled png or jpg image, filled with your background color, as your background.
The key point to remember is that gif images, and numeric web color values, are not color managed by color aware browsers, but jpgs are. Including an embedded profile in the image means that the browser is free to convert the colors in a jpg image. Result: different color numbers.
Many, many thanks.
Martin
I just had this same problem and wondered if anyone else had experienced it. The solution was what was really weird for me. When I entered color number #333333 in the "all colors" palette and saved the image, it was slightly different when viewing on the web site. I knew this wasn’t right because I had done several others at a previous time. After trying several things that didn’t work, I decided to go back in and switch to "Only Web Colors" and try again. This time my web background and my image are a perfect match.
I’m happy that it works, but I’m confused as to why there is a difference. I would think within Photoshop that typing #333333 would give me the same color either way.
Can someone explain?
Thanks,
Debbie
I’m referring strictly to the OP’s headline:
‘Image color in jpeg doesn’t match backround color in web page’.
The source of a JPEG may have a background color AABBCC hex. The table cell background on the web page is as well AABBCC hex. The JPEG background appears slightly different to the table cell background. IMO, this has nothing to to with color management for almost all browsers. The reason: JPEG compression modifies colors slightly, which is not obvious in normal photos.
A practical solution: make a 16×16 pixel image with color AABBCC hex and compress it with exactly the same settings as the original JPEG. Then use the 16×16 pixel JPEG as table cell background by automatic repetition.
Best regards –Gernot Hoffmann
I think you missed the point of MY question. Mine did not match when I was using the "all colors" Color Picker. However, when I had "Only Web Colors" selected in the Color Picker and saved my JPEG, the same #333333 matched my web site table background.
I found that to be odd. I understand that JPEGs are compressed, but I do not understand why it makes a difference whether I have "Only Web Colors" selected if I enter a specific color number that falls in both groups.
It works, I just don’t understand the difference.
Debbie
Gernot said "I’m referring strictly to the OP’s headline".
I did see that. I suppose I should have posted a new topic, but I thought Martin (the OP who posted his question in November) might be interested in reading my post if he was subscribed to this thread since this was the same problem he had. I thought he might be interested in how I fixed my problem. And, I was merely trying to understand why that worked. Gernot’s post did not answer my question, and I had already posted a solution to the original question. I posted again so that someone might explain why it worked and answer MY question. I’m sorry to have bothered anyone.
Debbie,
I think you had just good luck. I should have written
‘JPEG modifies MOSTLY colors slightly’ (sometimes not).
About the Web-safe colors: these are outdated. JPEG uses normally 8 bit-per-channel truecolor. JPEG doesn’t ever
use the Web-safe palette (opposed to GIF and PNG-8, where this is optional, in PhS called ‘restrictive’).
Why does JPEG eventually modify colors ? A didactical example: Original colors for instance R1=68, R2=94
Encoding: R1’=Round(68/17)=4, R2’=Round(94/17)=Round(5.53)=6 Decoding: R1"=17*R1’=68, R2"=17*R2’=102
R1 is not modified but R2 is.
The division by numbers like 17 is essential for JPEG.
Best regards –Gernot Hoffmann
Hi Gernot,
Thank you for the explanation. I have an understanding of most of that, but I may have to do a little reading. 🙂
I do like your idea of just creating your background cell to ensure that the color matches.
I’m going to test some other colors for fun to see if I get similar results with any of the others. It frustrates me when something just works and I don’t understand why. I like to understand why.
Thank you again.
Have a great day,
Debbie
