Color Rendering Difference: Firefox vs. Safari
CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:
I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown looks completely different between the header and body creating a seam where they meet. Do you have any idea on how I can avoid these differences in safari?
I opened his site in both Safari and Firefox and indeed, I saw the same problem. Here is a screenshot of them side by side:
See the color clash below the photographs and before the first post? Yikes. My first thought is to find both of the images and take a closer look at them in Photoshop. Here is the header image and here is the body image. Check out what happens when I drop the body image square on top of the header image:
On the lower right there, you can see the body image square plain as day. That explains what is going on in Safari. The images clearly have different shades of that tan color so the clash makes sense. So what the heck is happening in Firefox?! Does it have some kind of super-genius color-matching abilities?
Norm offered to send me the original file that he created both the header and the body images from. I thought I would compare the live graphic files to this to see if that would uncover any information. I opened this original file and placed the body background square over this, and…
It matches perfectly! Hmmm… So it seems like if both of the files were originally created from this original file, then something happened while exporting the top header image that is changing the tone of it somehow. Right away I considered color indexing. Since the top image has a much wider variety of colors it is dealing with, if the images were color indexed the top image would have much less colors to dedicate to the tans which could explain a tone variation. Since both the images are JPG’s, and color indexing only happens with GIF and PNG, this is not the case.
Then it struck me…
Ah ha, it’s color profiles!
I really should have thought of this right away, but sometimes simple answers are the most elusive. I remembered that Safari is one of the only browsers that actually supports color profiles of images. A quick “Get Info” glance at the two images reveals the true problem:
The top image indeed was exported differently, it’s using a “Calibrated RGB Colorspace” while the body background image was using “sRGB”. This is likely caused by saving the images from Photoshop in different ways. If you “Save As…” from the file menu, you will have the opportunity to save your color profile along with the image. If you “Save for Web & Devices…” the “sRGB” (best for the web) color profile will be automatically applied (in CS3 anyway).
So there you have it. It wasn’t Firefox being super-smart, it was actually being dumb and just looking smart. Like Reese Witherspoon.
The purpose of these color profiles is something I could into another time, but the important thing to remember to avoid problems like Norm’s is to make sure all your images were exported in the same way and so they either don’t have a color profile or all have the same color profile. This will ensure that the site, at least color-wise, renders the same from browser to browser.
To check whether your browser honors color profiles (and how well), check out the ICC page on the subject.
Loading ...
1
Brilliant. I rarely use my Mac because most of my daily work requires PC-specific tools and IE compatibility (to my chagrin). This is a very useful debugging tool. Now if I can just convince the world to ditch IE so we can have native PNG transparency…
Also, I thought I was the only Reese Witherspoon hater… glad to see there are like minds out there.
Comment by Kyle Kinnaman — February 28, 2008 @ 7:47 am
2
Good post, but I have similar issue that I cant seem to fix. I have a header image on a background with the color defined with a CSS rule. I use the same values from the CSS to set the background color of the header in photoshop when I create the header image so it blends in.
In firefox there is no issue, in Safari they are a different shade from each other. Using the DigitalColor meter application in OS X it tells me they are a different color even though they both have the same values.
In this example you solve it by giving both images the same profile. Because I am using CSS I can’t assign a color profile to that.
Any ideas how to fix this??
Comment by David Madden — February 28, 2008 @ 8:46 am
3
Brilliant. I never even thought of this. i had exactly the same problem before. Thanks for the information! Now if I could just get explorer to work with me.
Comment by Kimberly James — February 28, 2008 @ 10:20 am
4
I’ve been having this problem lately too, except I have been exporting everything in the exact same way.
Comment by Tommy Day — February 28, 2008 @ 10:34 am
5
Hey Chris, you should post some links to sites that you’ve designed to inspire all your CSS Tricks Students.
Comment by Tommy Day — February 28, 2008 @ 10:46 am
6
Wow. I had no idea that Safari supported color profiles. Very interesting and useful, thanks Chris!
Comment by Eric Wendelin — February 28, 2008 @ 11:25 am
7
Thanks for spending time on this question Chris, greatly appreciated! I will leave the page up for a while as an example and work on it next week.
Learning a lot from your posts, thanks again,
Norm
Comment by Norm — February 28, 2008 @ 12:24 pm
8
Great article, Chris. Sometimes it’s the (seemingly) simplest things that cause us the greatest problems… like when our tools decide to try and “help” us without our knowledge.
Comment by Rob @ CSSnewbie — February 28, 2008 @ 12:26 pm
9
Excellent article.
I currently do not have access to Safari or other browsers than IE 7 or Firefox but I have heard complains about this.
I’m surely be on the look for small mistakes like this in the future.
Comment by Mario Andrade — February 28, 2008 @ 12:41 pm
10
Yeah thanks for this and lesson learned!
Comment by Jermayn Parker — February 28, 2008 @ 5:23 pm
11
thank you!! great tip!!
Comment by Nitos — February 28, 2008 @ 5:40 pm
12
I have been dumbfounded about this problem with some of my own sites, but never spent the time to solve it. Just a quick check for the same color hex in photoshop. Your post made me go “doh!” and give myself a slap. I should have known.
Comment by Adrian — February 28, 2008 @ 5:50 pm
13
I’m pretty sure the problem some of you are experiencing is due to the fact, at least before CS3 apparently for those who may have it (I don’t), is that you must convert the color profile to sRGB before saving it for the web. I’m using Photoshop CS and know that if you don’t take that specific step before saving, assuming you are working with a different color profile to begin with, you can get some funkiness.
I don’t know how to accomplish this in editing software other than Photoshop, but as for PS:
Image > Mode > Convert to Profile …
Understand that “Convert to Profile” and “Assign Profile” will not accomplish the same thing. Convert will keep your colors the same, as much as possible, anyway.
Comment by Brent — February 28, 2008 @ 6:21 pm
14
By the way, I don’t think that you should call Firefox dumb, or Safari smart, for rendering images the way they do. I think you may reverse that completely. It seems more like an I.E. sort of decision on Safari’s part, albeit with more logical and certainly good intentions.
Why should we continue down the futile road of having browsers render the same content differently? Yes, I know the content wasn’t really the same as pertains to the profiles, but I’m struggling to come up with a reason that this is important for the web, especially since it will and already does cause problems.
The only use I see for color-profile aware browsers would be to teach people about differences in color profiles. That, however, could be done with screenshots and the like.
This only causes more confusion and difficulty which I thought we were getting close to stomping out. I say, “Safari is being dumb.”
Comment by Brent — February 28, 2008 @ 6:31 pm
15
Hi, I work for Mozilla and wanted to let you know that we have added color management support to Firefox 3, which is currently in beta. We’d love to have people who care about color management on the web test the Firefox 3 Beta and give us feedback. Please note that color management will not be enabled by default to prevent subtle color variations affecting the overall look of web sites. To enable it you must set gfx.color_management.enabled to true (via about:config) and restart Firefox 3 Beta.
Comment by Gen Kanai — February 29, 2008 @ 1:11 am
16
Hello Gen,
Thanks for popping in to let us know. I’ve been playing with FF3 but I didn’t know about the support for color profiles. If there is anything else you want to share about the subject, please let me know.
Comment by Chris Coyier — February 29, 2008 @ 1:19 pm
17
Can someone fill me in as to why this is important for the web? I’m for color management, but as for viewing things on the web I cannot figure out why this is necessary.
I honestly believe this is senseless. I at least give kudos to Firefox for keeping the default to false.
Comment by Brent — February 29, 2008 @ 9:25 pm
18
Thanks for sharing this. Very useful.
Comment by Patrick Matte — March 1, 2008 @ 7:26 am
19
@Brent: From mozilla:
Comment by Chris Coyier — March 1, 2008 @ 7:28 am
20
Yes, but that’s a canned answer that doesn’t really get to the point. I’m a photographer and certainly am aware of the need for color accuracy. I’m just saying that as pertains to the web and how to accomplish color accuracy for web viewing, it makes no sense. There should be one standard color profile for the web. Having more (which equals having no standard) will only create problems.
To be sure that everyone is seeing the correct colors not only depends on icc profile aware browsers, but accurately profiled monitors. It’s not solving anything until we can assure that every viewers monitor is correctly profiled. How can Firefox, Safari, Opera accomplish that?
I say we need one standard. If prepared properly, the colors will be accurate. Anything that is so critical beyond the ability of sRGB viewing isn’t something that professionals are going to rely on normal web viewing for anyways. More than likely, anything critical will be FTP’d, or even emailed.
Thanks for the Mozilla quote and your time, Chris, sincerely. I know I’m not arguing with you, so please don’t take it that way. I’m just posting to see if anyone has a different take. Again, I’m all for icc-profiles and color accuracy; I’m just not convinced that this particular approach is the right one for the http://WWW.
Comment by Brent — March 2, 2008 @ 4:32 am
21
I think you bring up some great points Brent.
The web will probably never be able to calibrate color on peoples monitors, nor should it. And because color profiles are only half of the puzzle of color accuracy, is there any point to supporting adding support for color profiles? Doesn’t it make more sense to use one standardized color profile? I really don’t know the answer to that.
What about the “lipstick” example… A lipstick company might sell 100 different shades of red lipstick, and in order to do that online properly, they REALLY need to be as accurate as possible with the color they are displaying in those images. What if there is no perfect shade available in sRGB to get the job done? Wouldn’t it be good to use a color profile that could come closer? But what happens then when someone is using a browser that won’t use that color profile? Will it degrade nicely to sRGB and be “close”… or will it be WAY off?
If there is a way to make sure that the images with color profiles attached “gracefully degrade” I could see color management being pretty awesome for the web, but without that, seriously problematic. Also, this really should only be used for like “product shots” or “color samples” and not for images making up the page design. As we saw in this article, images used in actual page design should be built to as wide a standard as possible.
Comment by Chris Coyier — March 3, 2008 @ 2:28 pm
22
Thanks for your thoughts, Chris. I feel like there probably is a good use for icc-profile aware browsers, but for now it still escapes me a bit. We’ll see where it goes …
Comment by Brent — March 8, 2008 @ 5:52 am
23
Wow thanks for that, never would have guessed. Very helpful.
Comment by Jarryd — April 15, 2008 @ 11:39 pm
24
Hey Chris,
Any thoughts/tips on correcting colors between images and CSS? I have an image that is supposed to blend into its background, but Safari shifts the image colour. I’ve check in PS CS3 and the color profile is sRGB. Not sure what’s going on, but it’s quite infuriating. In PS, the source image and a screen shot come out as the same hex code, but are clearly different visually.
Thanks for any help,
georges
Comment by georges — April 16, 2008 @ 6:41 pm
25
@georges: Did you check both images to make sure they were sRGB, not just one of them? If you have a URL with the problem, I’m sure we could sort it out.
Comment by Chris Coyier — April 16, 2008 @ 7:01 pm
26
Chris, thanks for the speedy reply. Turns out GammaSlamma took care of the problem. I guess the embedded gamma correction in my PNGs was doing it and not the color space issue.
I think my problem is PNG specific. I’ve found a bunch of pages about web color management and PNGS are singled out as being problematic.
For anyone else that stumbles across this post and these comments, you can get gammaslamma at: http://www.shealanforshaw.com/ . Alternatively, for Linux and Windows machines, google PNGCrush.
Hope this helps someone,
georges
Comment by georges — April 16, 2008 @ 7:12 pm
27
Thank you for this entry. I was having the exact same problem, but all is well now.
Comment by Vincent Saletto — May 7, 2008 @ 11:23 am