One of the frustrations of using the image compression (.png format), is the problems it can have with IE 6, 7. For those of use that like to use transparencies in png images for example, know that we have to find a png IE 6 transparency fix, if we want them to work in IE 6. Fortunately, Microsoft was somewhat on the ball with the release of IE 7, because it now supports png transparencies. However, in creating some web pages where I was using a png next to a jpg with what I thought to have the same background color, IE 7 for some reason made the png darker. Although it was ok in Firefox, this is frustrating for cross-browser debugging. This discrepancy is due to a way IE 7 reads the png file information.
When you compress an image in Photshop as a png format, the gamma information related to it is saved within the file information. When taking advantage of transparencies within the png format, this data has to be removed in order to work correctly in IE 7. So how do you do this? TweakPNG.
First, download the program. It’s standalone, so you won’t need to install anything. Open the program and drag your problematic png into the window of it. You will then be shown some options that will look like this:
If you look on the left in the “Chunk” column, you will see a “gAMA” property. All you have to do is click on it, and press Delete. While you are in there, you might as well save a little bit of space by deleting the “tEXt” field as well, which only contains data of where the png was created, in this case Adobe Image Ready. Then click on “File -> Save” in the menu at the top, and re-upload your png, test it in IE7, and you should be good to go.
Although this can be a hassle, you should realize you don’t have to do this to every png you create. The problems occur when a png and jpeg or gif that need to match colors are close together. For many sites I do, I never use it because I am able to use images all on png format. But, it does come in handy when something needs to be done.
For more information about the png format, and how it is recommended by Wc3, click here.
Subscribe
June 26th, 2007
Hey there, your TweakPNG link is pointing to the transparency fix site; fwiw, should be http://entropymine.com/jason/tweakpng/
Cheers!
June 26th, 2007
thanks for that. updated now.
June 26th, 2007
Luckily, it seems Adobe Creative Suite 3 products, including Photoshop, no longer save the gAMA parameter in PNG files. No more hassle with going through and modifying all of my PNGs.
June 26th, 2007
I wasn’t aware CS3 made that change. Thanks for the info. I guess this is good for those using earlier versions.
June 26th, 2007
Awesome find! Very cool. Thanks muchly.
June 27th, 2007
I use PNGGauntlet to work on my photoshopped PNGs. It’s very good, and it’s free too.
June 27th, 2007
well this is very usefull article, especially comment of Jeff, i also wasnt aware of CS3 capabilities and im very happy to hear that.
June 28th, 2007
Hi,
Just thought I would share the MAC version of this that works well. It is called GAMMASLAMMA. Here is a link to the blog that has the explaination and download link.
http://www.shealanforshaw.com/introducing-gammaslamma-10-for-osx/
August 4th, 2007
Aaahh…so that’s why…
I redesigned my site a couple of weeks ago, and I had the background sidebar colour leading down from a background png file, and although I had set them to the same colour, it looked different. It spoiled the whole look, so I ended up doing a complete redesign!
September 26th, 2007
About that what I was wondering. My PNG wasn’t able to show transparency. Thanks for sharing.
September 28th, 2007
PngOptimizer works great and will do whole folders full of PNGs in one swell foop:
http://psydk.org/PngOptimizer.php
November 2nd, 2007
I’ve found PNGOUT to be a much more valuable application. It optimizes the PNGs and makes them good to go for IE. Best part is you can sling any number of PNGs into the program at a time and it will crunch all of them in a flash. I typically get a 10-20% reduction in file sizes.
November 14th, 2007
[…] Nutzung von PNG und JPG nebeneinander kann problematisch sein. Patrick Bennett berichtet, daß er immer wieder festgestellt hat, daß die gleiche Farbe in einem PNG dunkler wird, als in […]
November 14th, 2007
[…] Die Verwendung von transparenten PNG im Internet Explorer 7 stellt prinzipiell kein Problem dar. Allerdings werden vom IE7 die Farben der Grafiken im Vergleich zu anderen Formaten etwas dunkler abgebildet als sie eigentlich sein sollten. Schuld daran ist eine in PNG-Dateien abgespeicherte Information über den Gammawert des Bildes, die den Microsoft-Browser so sehr verwirrt, dass er die Farben verändert. Die Lösung: Die Gamma-Information einfach aus der PNG-Datei entfernen. […]
March 26th, 2008
Aha! fantastic, this explains why using the exact Hex code as a background colour doesn’t match the PNG banner background on my page in IE. I love FF and hate IE, weren’t they supposed to have fixed IE now to do PNGs properly? Clearly not completely!
June 20th, 2008
[…] schreibt in einem Artikel, wie man so was beheben kann. Man müsste nur mit TweakPNG den Attribut gAMA von der png Datei löschen. […]
Leave Your Reply