Web Color Managment Picture - What is going on here?

I will admit I’m a little ignorant of all the gory details that go along with displaying and dealing with colors. Its one of those things that most people think is not that hard until they investigate it and then it just gets more and more confusing.

What is going on here?

It appears that they are 3 different variations of how this image can appear depending on what browser or photo program you use.

Firefox
Internet Explorer
Photoshop

I am guessing that there is some kind of white-point/black-point being defined in the image format (.jpg) and depending if your program appropriately reads that, it displays the pictures differently?

The green is the most baffling.

Well, at first, I suspected a trick - maybe the server was just dishing out a different image depending on how the requesting browser announced itself, but I downloaded a copy and looked at the local copy using different viewers/browsers and it does render differently.

I thought I would try a mid-week bump to see if anyone knew the answer to this one?

Pretty much exactly what it says. Different portions of the image are set up using different color profiles. A color profile is essentially a map of what color code corresponds to what actual color. These are vital for being able to express the same color on different devices.

It seems he designs the image where, under the default profile, it outputs green text and some nearly black text that is nearly invisible on the black background. But he includes a profile to convert the black text into white text and convert the green text to black, and then another profile with special attributes that converts certain portions of the white text back to black.

A good interpreter will read both of the profiles. A fairly good one, only one. The worst will not read them at all and just use the default profile.

Maybe this brings me to a better question. Why are there all these web profiles that do stuff like this?

When I grew up, men were men, women were women, green pixels were green, and red pixels were red. Why do our browsers need color profiles to screw with this stuff?

That would require getting into the reason for color profiles in the first place. As I mentioned, they are created so that different types of devices produce identical output. You want your camera, scanner, printer, CRT and LCD monitor, etc. to all produce identical images, but they all use different technology. One needs a color profile to make those mappings. Originally, different people had different solutions, but now standards have emerged that come with every modern operating system.

Nowadays, it’s more for giving the designer more leeway. You want to be able to have as many colors as possible, but you also want the differences between close colors to be very slight, so that similar colors will fade into each other. You can create color Being able to mess with that requires different profiles for different images.

I’ll admit that, once the design process is finished, the average person isn’t going to see any difference, as long as you do a proper conversion to the default sRGB profile. But designers are a picky bunch. Heck, they may even have a different idea of what looks identical in print output.

I’m not sure how much it relates to the colour profiles being discussed here, but I thought it might be worth noting that jpeg compression doesn’t really directly address individual pixels - instead, it describes the appearance, shape and change/gradient of colour/luminance embodied in blocks of pixels within the image (well, something like that, anyway. More details here)