PNGs Have Different Colours in Different Browsers?
Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks.
The problem? Gamma. Some programs (like Adobe ImageReady) export PNGs with Gamma metadata. While I’m sure this metadata could be useful, it causes colour inconsistencies in Internet Explorer (6 and 7 confirmed.)
Solution – TweakPNG. Download this Windows program – consistent PNGs are X steps away:
- Open TweakPNG
- Load the problem PNG into TweakPNG (Either drag and drop or File > Open)
- In the list of “Chunk”s, select “gAMA” and press the delete key.
- Save (Ctrl+S or File > Save)
Done.
Send to a friend
Tags: background, colour, consistency, css, different, internet-explorer, png, solutions
Tim Cinel » Blog Archive » 2009-05-06 - My Daily Summary
[...] Bookmarked a link on Delicious. PNGs Have Different Colours in Different Browsers? [...]
May 7, 2009 @ 1:09 pm
Richard
I found this article interesting. So are you saying that in IE6, when a .PNG displays as a grey box, this workaround will solve it? Or is that a slightly different problem. I’ve had to implement solutions such as the pngFix script to get around png issues in IE 6 in the past.
My png’s have been exported from photoshop, so perhaps this also works around the png metadata issue?
Great post Tim, keep ‘em coming…
June 2, 2009 @ 9:41 am
Tim
Hi Richard,
That ‘grey box’ is a separate IE6 issue, where for some really, really bad reason the IE team decided that nobody would have use for PNG transparency.
This issue involves PNG metadata that some browsers ignore and others do not causing perceivable inconsistencies. To this day, I avoid GLORIOUS transparent PNGs due to IE6 incompatibility
The image below the heading is an example of the same image with and without the metadata, placed next to each other. The ‘seam’ between the images is evident, though it shouldn’t be.
Thanks for the comment
June 2, 2009 @ 3:34 pm