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).

But in IE8 it displays a different, darker colour.

Answer 1

It may be useful to others to know that using Yahoo Smushit to optimize the images for the web corrected this issue for me (and it's a good idea in general to run your images through this or something similar).

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

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.

Answer 4

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 5

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 6

I've discussed the PNG Color Problem in Internet Explorer and its solution with screen shots. The solution is to remove the gamma chunk from the PNG image (using TweakPNG utility for example). This makes the images render in the correct shades in Internet Explorer. Some uncommon browsers may still behave erratically.