Question

I have a gradient image as a PNG (no transparency) in a web-page. By taking a screenshot of Chrome showing the page and cropping the image from the page, I see the exact same colors are drawn as the image contains... put the screenshot next to the image in Paint and they are identical.

But when I do the same with the page rendered in IE8, the colors are different. I thought initially IE8 must be cropping the edges and stretching it, but this is not the case... IE8 is rendering colors that are not in the original image, like there is a filter on top of the image.

Anyone got any ideas why, and how I can address this? The point is I have a background filled with solid color, and the gradient image is designed to perfectly blend with this... one side of the image is the same RGB value as the page background. Obviously if the image is not drawn right, you see a nasty edge effect.

Answer 1

It s only slightly different, right? But enough to see the difference?

That s because PNG files typically store gamma correction information, which was supposed to be a good idea, but actually isn t: The Sad Story of PNG Gamma “Correction”.

The best way to fix it is to remove that gamma information from the PNG, and in fact all other color space-related information. That s all stored in the gAMA, sRGB, cHRM and iCCP chunks.

There are several utilities that can do that, for example Pngcrush and Pngout. There are tons more of these tools around, some with more features than others, and some more user-friendly than others, but you should be able to find those yourself now.

The PNG Gamma Dilemma kind of summarizes that first article, and gives some usage info for Pngcrush.

友情链接