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.


Leave a Review

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>