Background colour of a PNG in IE8

Question

I have the following logo, which displays as the same background colour as the HTML body in FF3, Chrome (#363636):

• Logo

But in IE8 it displays a different, darker colour.

Is this FF3/Chrome being forgiving of my PNG, or just another IE bug (I thought they fixed PNG support in IE7)?

(Update: The logo is fixed now on that link but it was displaying as a darker shade, virtually black)

Update 2: I still get this problem, and the pngcrush arguments I use to correct it are:

pngcrush -replace_gamma 0.5181347 infile.png outfile.png

The Win32 binary link is here.

Answer 1

You have a gamma correction information (gAMA chunk) structure in your PNG. That's fine if you're working with photos where you want gamma correction, but it's not the right thing for the web.

On the web, browsers typically do not apply gamma correction to HTML/CSS colours or other images, so if you use gamma correction you'll get results on your PNG that are inconsistent with the rest of the page. Some browsers do not apply PNG gamma for this exact reason, which is why you are getting the variable results.

Load the logo into an image editor and save it back out without the gAMA chunk information. More.

Answer 2

You need to remove both gAMA and sRGB chunks from your PNG. Additionally you need to remove any ICC colour/color profile attached to the image.

Photoshop "Save to Web" adds a standard sRGB ICC profile - that is great for content images but completely wrong for styling images where you need to match to CSS colours.

This is particularly noticeable in Safari - about which I have a blog post.

Answer 3

I noticed this problem across all IEs -- 6, 7, 8. Some of the PNG images would have black outlines around them in the transparent areas. Turned out that I had to open Gimp (my free cross-platform image editor), open the PNG that had the problem, and use the Fuzzy Select tool on 150% to reselect the transparent area and click Delete. Then resave. That usually resolved the blotchiness around the PNGs in the transparent areas about 98%.

If that didn't work, then reload in Gimp, set the background to white, choose Flatten Image, set the Fuzzy Select threshold to 3%, select the background you want to delete, choose Delete (Clear), then reselect background yet again with threshold at 150%, delete, and then resave the image.

Note on my Fuzzy Select tool my Gimp settings were check Antialiasing, uncheck Feather Edges, check Select Transparent Areas, uncheck Sample Merged, and Select By Composite.

Yeah, this appears to be an IE bug with PNG images that have a transparent background. None of the other browsers -- Opera, Safari, Firefox, Chrome -- have this issue. My suspicion is that some image programs are setting like 50% transparency as part of some kind of antialiasing on the edges, because it's only the edges that are having problems. I think the non-IE browsers are handling 50% transparency on a pixel, but IE may only understand like 100% transparency on a pixel -- just a hunch.

Answer 4

When you download IE8, and then restart your computer, a pop up comes up again asking you to do some updates. If you ignore this, you will likely have this problem. I had this problem on one computer, but tried out another computer and the problem has been solved now. Maybe "reinstall" or fix the IE version you have, make sure you do all your updates.

Answer 5

The top-rated answer here suggests a bizarre reset to the gamma value of 0.5181347 using pngcrush. This may work in some universes, but in ours your best path is to strip all color-space information from the PNG so that it is rendered purely in the same neutral RGB-triplet space that the browsers are using for colors in CSS:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

What this means for real color-heads is that the original color you designed may not appear the same on another monitor or operating system, but all your colors with the same RGB values will be rendered the same way for each user according to the browser+os they are on. Specifically, background or adjacent colors abutting a PNG will match, so you can design your site with interlocking images and colors.