Using PNGs

Since PNGs are now supported by practically every modern A-Grade browser except for the old classic IE6, new methods of implementing this file type, while still catering to IE6 need to be explored. I’ve read a number of articles and pieced together a method which seems to work very well, at least within my own systems.

Since IE6 is really the issue here, there are a number of techniques which you have to use to get the result you want, but the very first issue, that affects all versions of IE, including IE7, is the PNG gAMA problem.

Although PNGs will be shown correctly for the most part by IE7, it interprets the gAMA of the PNG as darker than what it should be. I can’t claim to be an expert on the PNG format, but from what I gather, the fact that it includes gAMA information within the file is a positive thing. In our case, it’s a pain. But no worries, there is an easy solution to all of this which I recently stumbled across. The posting is about a small free program which allows you to access the different information chunks within a PNG file. Download the program, run it, and open your PNG file. Left click to select the gAMA property, then right click and delete it. Finally save your file. Once that chunk is deleted, IE will show the colors in your PNG file correctly, and not darker like it would if the gAMA information was still there.

Now the file is ready to be placed within your code as either a background image or hard coded image. It should look the same in IE7, Firefox, Opera and Safari.

To get it to look right in IE6, it’s going to depend on just what kind of application you are using the image for. IE6 needs to use a Microsoft proprieatary piece of CSS to show a PNG, at least a PNG which is using the Alpha channel, or transparency.

There are multiple types of PNG files. There is the PNG 8-bit type which replicates a GIF in many ways (it only allows 256 colors), but uses better compression, and then there is the PNG 24-bit which uses all 16 million colors and includes a full Alpha channel. If you are using Photoshop, both of these file formats are available to you in the save for web dialog box. Something of note is that now that you know how to remove the gAMA information, 8-bit (256 color) PNGs should be used in place of GIFs for practically all GIF image applications since they are smaller usually. The only case I have run into when a GIF file is smaller than a 256 color PNG is for very very small size images.

If you are just using an 8-bit PNG, then just remove the gAMA chunk as explained above and you’re done, no special code for it. If you are using a 24-bit PNG, but no transparency, then again, just remove the gAMA chunk and you’re done.

If you are using a 24-bit PNG with transparency (which is really the true power of the format in regards to usage on the web), then you need to figure out what you are using the image for as there are limitations.

When IE 6 uses the proprietary code to render the PNG with it’s Alpha channel, a piece of the of CSS statement covers how the image will be displayed.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, src='images/pngwithAlpha.png',sizingMethod='image');

The piece we are talking about is the sizingMethod part. The options you have are crop, image and scale. According to Microsoft, crop “Clips the image to fit the dimensions of the object.”, image “Enlarges or reduces the border of the object to fit the dimensions of the image.” (this is also the default) and scale “Stretches or shrinks the image to fill the borders of the object.”

I have never used crop, but use image on a regular basis and have used scale twice (both times with varied results). I will be covering the very simple method I use. There probably are better ways of doing this, but this is a bare bones, quick, reliable solution that always works for me. The method is broken down into two solutions, one for background images, one for hard-coded images. First off background images.

Let’s say I have a header area on my site which uses an image that has a gradient on the bottom which overlaps a changing banner image. Of course I could just export all my images out including this gradient on them and circumvent all need for a PNG, but let’s also assume that the site will be handed off to the client’s 15 year old son who knows everything about web design.

Alright so you want this thing to be idiot proof, PNGs to the rescue. since this is a large image and not a repeating image (and also because like I said, the scale property doesn’t seem to work quite right) we will be using the image property for our sizingMethod. I also need to have my navigation on top of this PNG, so I have a div which wraps around my entire header area. This div will be either absolute or relative positioned, why will become clear here in a second. Next we have another div that is going to contain our PNG. For everyone but IE 6 we will be setting this div with the PNG background image with just regular ol’ CSS. For IE 6 we are going to use an IE conditional comment to target everything lesser than IE 7 and load our PNG with it’s Alpha using the image sizingMethod inside this div. This div will be absolutely positioned to top:0 and left:0. Next in our source will be our ul, or whatever you are using for your navigation which will also be positioned the same way and since it’s second in our source, it will appear on top of our PNG.

I know this seems like a backward way of doing things, but like I said, it’s tried and tested to work in the A-Grade browsers.

For hard-coded images, we just use a little trick that I mentioned elsewhere on hiding hard-coded images. Basically again just for IE 6, target the img that is a PNG, set height:0 and then padding-bottom to whatever the image height is. This hides the original image and then in that same line just load your PNG again just like above in the div.

And magic, the original image is hidden and the processed PNG shows up. One key with this is to make sure you set in your CSS the width and height of the image so that is inherited for IE 6, otherwise the PNG has trouble showing up.

There is so much to say about using and deploying PNGs for cross-browser compatibility, and I hope the above helps explain a little more about everything that is involved. As IE 6 is phased out these types of methods should fall by the wayside but for now, this is the best solution I could come up with.

Can’t get enough? You may be interested in these posts as well:

Preview Your Site: Mobile Devices

IE6 Background Flicker

How to Destroy the Web

Free and Cheap Windows Utilities I Cannot Live Without

Safari on Windows…finally