Colourful displays
-
I just got caught out by new functionality in web browsers that had me puzzled until googling for the problem led to enlightenment. I had whipped up a small graphic in photoshop and carefully matched the hex value of the colours[1] to the definitions used in the CSS file. My (simplistic) testing scheme went like:
- Look at the page using Safari and Firefox on my Mac (where I developed the graphic) - Yep .. looks OK
- Look at the page in Windows using various versions of IE. Hmm .. in IE 8 the colours don't match between the graphic and the page anymore. But it looks fine under 7, 6, and 5.5
- Look at the page in Windows using Safari and Firefox. Hmm the colours don't match here either
The "problem" was that the latest Safari, Firefox and IE now understand embedded ICC colour profiles. This was fined when I was testing on my Mac as when I was creating the graphic, by luck, photoshop defaulted to the colour profile of my Mac's monitor. Under Windows the newest browsers did horrible things with the profile information which resulted in my graphic not fitting in with the web page colour scheme. But the older browsers just ignored the profile information and I saw what I expected.
So this is another thing to add to the list of items to check off when building a web page - make sure your colour profiles match
[1] To head off the potential flame war, colour is a perfectly respectable way to spell the word that some people choose to spell as color.
-
@OzPeter said:
Under Windows the newest browsers did horrible things with the profile information which resulted in my graphic not fitting in with the web page colour scheme.
Are you using Vista by any chance? Would this be related?
-
@OzPeter said:
To head off the potential flame war, colour is a perfectly respectable way to spell the word that some people choose to spell as color.
You're wrong, it's spelled flamewar (one word).
-
@PJH said:
Are you using Vista by any chance? Would this be related?
Nope .. I'm testing under XP SP3. All that has changed since I last did something like this was upgrading the browsers.
-
@DOA said:
@OzPeter said:
To head off the potential flame war, colour is a perfectly respectable way to spell the word that some people choose to spell as color.
You're wrong, it's spelled flamewar (one word).
Of course I could counter with Flame war
-
Colour management on computers is TRWTF. Between your graphics card, the OS, any resident software like Adobe Gamma, and the actual software you’re running (Photoshop or your Web browser), it’s fucking impossible to ensure you’re actually seeing the colours that you’re intending to look at. Really, you don’t need to make sure the ICC profile matches—you need to make sure it isn’t written to the file in the first place. (And then for your workflow you need to stop Adobe from fucking with your colour output, since they will make it wrong.)
Actually, maybe you didn’t notice, but the existence of any sort of gAMA chunk in PNG files has caused problems with IE since forever; in IE6 (and probably IE7), if your PNG file had one, your image would end up being darker than the rest of the page (regardless of whatever colour data was actually there). Now their PNG library finally processes it properly, but as you’ve discovered, the world of colour management is so fucked up that you end up in a situation where your final output looks less like the original than the original if you include colour profile data, thus completely defeating the entire goddamn purpose. (Of course this isn’t entirely the fault of colour profiles, since browsers still only fiddle with the images and not the CSS colours set on the rest of the page. Sure, that makes sense…)
Anyway, TL;DR, when you are using Photoshop make sure you always uncheck “Embed color profile” and “Convert to sRGB” when you use Save For Web (you are using Save For Web, and not regular Save, right?). If it’s a PNG file, you’ll also need to run it through
pngcrush -rem allato get rid of all the colour profile data that Photoshop adds.Yay colour management! Yay Photoshop!
-
I had the same problem with a PNG here and there in Safari, and I fixed it by removing the ICC profile with the outdated pngcrush, because no other png optimizer seems to support removing this data.
Dell computers often come with a profile in Windows, which is picked up on by Photoshop. The easiest way to a headache-free life is to remove this profile and replace it with sRGB, then set Photoshop to sRGB as well. One particularly egregious situation caused all screenshots to look pink when pasted into PS. This is, uh, subdesirable, to say the least.
The problem stems from that fact that the profile is applied twice: once in Photoshop and once by the OS. Since the effects are often very subtle, you don't notice it in Photoshop, but it really stands out if a browser honours the image's profile, because the profiled images get two transforms, and the rest gets only one.
Software should ignore embedded profiles. It's for monitors, applied at the very end of the graphics pipeline.
PS.
Firefox?!
3.5 either ignores profiles or does something that ensures colour consistency between code and image, because I've never seen an anomaly.
-
Given that browsers now support profiles .. how long will it be before some smart wag suggests that CSS should also do the same in order to give a better "experience". Oh .. wait .. it has already happened
-
@snover said:
Actually, maybe you didn’t notice, but the existence of any sort of gAMA chunk in PNG files has caused problems with IE since forever; in IE6 (and probably IE7), if your PNG file had one, your image would end up being darker than the rest of the page (regardless of whatever colour data was actually there). Now their PNG library finally processes it properly, but as you’ve discovered, the world of colour management is so fucked up that you end up in a situation where your final output looks less like the original than the original if you include colour profile data, thus completely defeating the entire goddamn purpose.
If you're using PNG, wouldn't it be easier to make the background of the image transparent and just show the actual background of the page?
-
@dcardani said:
If you're using PNG, wouldn't it be easier to make the background of the image transparent and just show the actual background of the page?
-
@db2 said:
@dcardani said:
If you're using PNG, wouldn't it be easier to make the background of the image transparent and just show the actual background of the page?
-
@dhromed said:
PS.
Firefox?!
3.5 either ignores profiles or does something that ensures colour consistency between code and image, because I've never seen an anomaly.Are you looking at the page on the same computer that output the image from Photoshop? Because I can assure you that Firefox 3.5 only adjusts the images, and that this does indeed cause anomalies if your computer’s colour profile doesn’t match the one saved in the image. You might also be getting away with not seeing a shift because you happen to set your computers to use the sRGB profile, but as a result the colours that you are seeing displayed on your screen are probably inaccurate (unless you happen to have a magic monitor that has the exact colour reproduction properties of the sRGB profile).
Really, in my experience, the easiest way to a headache free life is to set Photoshop to Monitor Color and then tell it to ignore the colour profile on the PSDs you open—unless you are dealing with stuff that is actually intended for a device that isn’t a computer, in which case, good luck. :)
-
@rosko said:
http://www.twinhelix.com/css/iepngfix/
For the record, these sorts of pngfixes do occasionally have problems, particularly when interacting with hidden elments & js. I try to avoid them at pretty much all costs, unless it's really absolutely necessary. Getting the image right in the first place is a better solution.
