Fixing PNG image optimization for IE

png-graphicWhile designing website graphics and opting in for the PNG format, either png 8 or png 24, you might notice that everything looks fine in Firefox, Safari, Chrome, even some of the other popular browsers...with the exception of the non-compliant browser called "Internet Explorer" from a company called Microsoft. With this browser, regardless of the version, you will notice that png's look different, especially if you have an image on a background that has the same colour as your graphic, only to discover in IE that is not so.

A New Word to Learn - Gamma

I won't go into the explaination of what "Gamma" is but if you are interested, you can check out Wikipedia's Gamma information of what it is. However, for the purpose of the issue relating to png's, there is a gamma value that is applied when you save an optimized version of an image as a png format graphic. To give you a visual idea of what happens when viewing standard png images within Internet Explorer, you can see the screenshot below that depicts the undesired result:

png image in internet explorer

What you see in the sample above is actually half is an image and the other half is a background solid colour; believe it or not, both were created with the same colour value. Not the ideal situation when designing graphics...Generally to solve this there are png scripts and other programming methods to include into your website, but who wants to load more scripting?

Tweak PNG - A very Cool Application

I came across a cool application called TweakPNG that is free to download that helps solve the dilema shown above because it's a standalone application that you open like any program on your computer. Basically you open it up and drag your newly saved png graphics one-by-one into the TweakPNG window, right click on the "gamma" line you will normally find (see the screenshot below), delete that line (just that line), save it, and then you can drag another image into it.

png

If all went well, that first blue graphic I shown earlier with the blue background will now look like this:

png after gamma is taken out

Now it looks perfect!

Transparent PNG-24

One type of graphic that is common to use is the "transparent" gif which lets you have the background of the page show through whatever image you create. However, there is now a transparent png, also known as png-24. This lets you have transparent png's instead of gif's but with a better quality result. A good example is on this website (Pixel Theme Studio) because if you look on the left and right side of the content area, you will see a dark outer glow down each side. This glow effect is done with a transparent png-24 graphic which lets the overall page background (the gradient colours) show through and gives a smooth transition. If I were to change the background, the outer glow graphics will still maintain their transparency. Another example is the big article image I have here with the giant PNG word on top of the astract graphic. I actually did that on purpose with a transparent PNG-24 image to show how it looks on top of a pattern. If I didn't optimize this image with the TweakPNG application, in IE the PNG acronymn would be one big white square in IE.

Quick Note About Graphic Software

Although I have not tried the latest graphics software from the popular Corel, but I know that Photoshop did a horrible job of optimizing png's. Before they bought out their only major competition, Macromedia, Fireworks was Adobe's competition for web graphics where Macromedia's Fireworks optimized png's when saving, resulting in good quality images. However, Adobe now has Fireworks and I am wondering if the new Photoshop version (now CS5) uses the Fireworks technology because I used the trial version to test this out and I was able to get a good png without further optimization. For all previous versions, the TweakPNG application I mentioned will probably be your best solution...unless you are using Fireworks.

Comments 

4. Kyle Boone Posted: Sunday, 15 May 2011
I've been using CS4 for some time now and it's been working fine. For users of Macs that may be having png problems, you may want to export the file to a pdf or jpg and then open the exported file in "Preview" then save the file as a png. My png's have been working excellent
Quote
3. Swopper Stuhl Posted: Thursday, 16 December 2010
interesting article..thanks for this info...
Quote
2. Andre Posted: Monday, 27 September 2010
Your very welcome. It's something that has irritated me for a long time and then I found that TweakPNG application which I've been using for a year now. IE is last on my list of browsers which is why so many designers hate designing sites for IE...it's too proprietary and it's not a compliant browser (which many don't realize). For myself, I use Firefox, Safari (windows), then IE, although I do have Chrome as well. I downloaded IE9 beta to see how sites look in it...still buggy.
Quote
1. Peter Posted: Monday, 27 September 2010
Thank you for the info, I was not aware of the problem. Personally, IE is the last browser that I use because of problems although I don't know about the latest version. My browser of choice is now Chrome followed by Firefox. Love your new site and this sort of info and support.

Regards
Peter
Quote

Add comment


Security code
Refresh

Quick Directory

If you are looking for company information, details relating to our services, products, or you need to contact Pixel Theme Studio, the following directory should help:

About Pixel Theme Studio

aboutptsPixel Theme Studio is focused on designing professional WordPress themes and premium Joomla Templates (this site is in Joomla). The goal is to design real world concepts for individual bloggers and business owners with themes that are not bloated with scripts and code.  We create the best WordPress themes and Joomla templates possible by keeping the designs simple and clean.

Sybergen Certified

Twitter Feed

Please make cache directory writable.