17 Jul, 2007
Howto: Fix .png errors in IE and Firefox
Posted by: admin In: Uncategorized
On a recent project I was working on, I was thrown into the strange problems of using .png-files in Internet Explorer and Firefox. The problem lies in using Adobe Photoshop to saving .png files. The resulting files contains gamma-information, which IE and Firefox displays differently. The problem could be fixed using different pnghacks in the css style sheet, but that was not an option for me.
The problem
Adressing the fix using hacks is not my favourite way of doing things. It would be so much better to address the problem directly.
A colleague of mine, Kristian Klok from Payback Advertising showed me the solution. It’s a little piece of software called TweakPNG. It only runs on Windows (I am not aware of any MAC software that does the same at the moment).
The solution
The software simply enables you to edit .png files and all the information that is embedded. You can simply pinpoint the gamma information (or whatever information you choose to edit or remove) and delete the key. Then save and overwrite the file, and you are good to go. It is also a great way to optimize the .png files and removing redundant information that only adds to the filesize, resulting in bigger download times for your visitors and a bigger bandwith and strain on your server.
After opening the .png-file, you will see the following information (or close to it, depending on your file):
The key you are looking for is the “file gamma = 0.45000″ key, which is highlighted above. Simply highlight it, and press delete.
You can also safely remove the key below, “standard text: [Software]=[Adobe Imageready]“, which only takes up space and bandwith in your .png-file.
All you need to do now is save the new file (overwrite it by simply pressing CTRL-S). And upload it to your server again.
Long term fix
Now, as you can imagine, this is not a proper solution in the long run, everytime you need to edit a .png file, you need to run it through TweakPNG program again. Every time. I hope this problem is fixed in the Adobe Photoshop CS3, but I have yet to play with it.
