png color profile

Hi

I got some background-color that should match the color in a png file. It is working fine on all browsers except in safari. Somebody once told me the problem is that safari interprets the color profile of png correctly. Has somebody experience with this problem?

thanks eni

Yep. I found this problem just the other day. I say problem, it would appear that Safari (and Firefox 3.1b from what I understand) are actually the only browsers working properly!

Anyway. It all depends on how you created the image and what tools you used.

I used Photoshop to create and edit my images, and found that the (something like) "Save for Web..." option, in the File menu, allows you to do all sorts including remove/change the colour profile. After doing this, all my images matched my CSS colours. I believe the color profile had to be sRGB, but can’t remember.

This blog entry is an excellent resource for information on this: http://regex.info/blog/photo-tech/color-spaces-page1

Check the image mode... saving for the web is different for print for example. RGB is generally for screens and CMYK is for print for example.

You are right, rossco, but I don’t that’s the problem here.

Colour profiles are used in an image to store the interpretation needed (the colour space) for the binary data that follows.

For example, if I told you I am travelling at 3 and am 1.8 in height, you could guess but couldn’t accurately determine either quantity. You need units, as a start, but a vector also for my velocity and potentially whether I am snake or human to know in which direction my height applies.

The colour space stores all the information needed for the binary image data to make sense. Hue, saturation, intensity, alpha etc. CSS # values are expressed in RGB, which is how eerne’s picture matched in IE - it too was determined in RGB (not CMYK, as otherwise the colours would have been wildly different, regardless of the browser).

The RGB values are not enough. After all, they are just quantities from 0 to (255/FF/11111111/other). The colour space, in the colour profile, gives the browser (Safari in this case) the correct space to interpret these values with. In CSS, this is sRGB.

What happened here is that most browsers ignored the image’s built-in definition and used rRGB anyway, so they matched the CSS, although not by intention. The image was saved wrongly, in this case, and the "Save for Web" option in Photoshop specifically corrects this problem, among others, which is to re-encode the image in sRGB so that programs taking it into account will get a consistent result with those that don’t, because they’ll all be using sRGB to interpret the image.