18

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.

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

Update: 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.

Salman A
  • 262,204
  • 82
  • 430
  • 521
Chris S
  • 64,770
  • 52
  • 221
  • 239

7 Answers7

22

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • I saved it (originally a JPG) through Photoshop - so is this IE misbehaving? or doing it correctly – Chris S Mar 19 '09 at 18:48
  • nevermind "Some browsers do not apply PNG gamma for this exact reason, which is why you are getting the variable results" answers that – Chris S Mar 19 '09 at 19:02
  • It's arguable. In one sense IE is right to respect the gamma information in the PNG, but it's inconsistent with the way IE treats everything else. If Photoshop can't save PNG without gAMA, then (a) that's a bit crap, and (b) you can fix it using the Gimp or PNGcrush. – bobince Mar 19 '09 at 19:03
  • It's probably fixable with the save to web option, but I used pngcrush with the IE setting in the article and it was fixed – Chris S Mar 20 '09 at 20:29
  • I should add that Method 2 (the IE fix) fixed it for IE, broke it for FF/Chrome. Method 1 worked. – Chris S Mar 20 '09 at 20:38
6

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.

natbro
  • 1,038
  • 12
  • 13
2

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.

Salman A
  • 262,204
  • 82
  • 430
  • 521
0

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

Shawn
  • 8,374
  • 5
  • 37
  • 60
0

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.

Volomike
  • 23,743
  • 21
  • 113
  • 209
0

This is the only solution that worked for me: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8

Dan
  • 1,513
  • 1
  • 24
  • 34
0

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.

dnh
  • 527
  • 4
  • 15