Most casual web developers (and a fair number of professional developers) use JPEG or GIF images on the web, but there is another contender out there: PNG, which stands for Portable Network Graphics.
Why use PNG?
- Better compression without loss of quality (i.e., you don’t get those weird "artifacts" that show up when you crunch a JPEG image)
- Larger color palette than GIF
- It’s open source!
Probably the most exciting part about PNG files is that they support full alpha transparency. What does this mean? Well, with a GIF image, you can knock out a specific color and have transparency. With a PNG image you can do that, plus you can choose to have elements be semi-transparent.
Here are two example images. Note: this is simulated, but these are the kind of effects you could achieve:
Simulated GIF Effect
Simulated PNG Effect
But what about Internet Explorer?
This is obviously a huge boost to web design, but the problem, as is often the case, is Internet Explorer. Prior to IE7, IE did not support alpha transparency. You could use PNG images and get all the other perks, but it would substitute a light grayish color in place of your transparency.
Every other major browser from the last few years could handle PNG alpha transparency, but unless you wanted to have duplicate versions of your site, one with PNGs and a simpler version of the design with GIFs for IE, most developers avoided PNG images. However, there has been a solution under our noses the whole time that I recently discovered: AlphaImageLoader Filter.
The AlphaImageLoader Filter
AlphaImageLoader is a proprietary IE function, and with it, you can utilize alpha transparency in PNG files. All you do is insert some code into your image tag, and presto, instant transparency support. This example is for a graphic of a smiley face that is 200px by 250px, where PATH represents the path to the image file:
<img src="PATH" alt="Smiley Face" width="200" height="250" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PATH',sizingMethod='scale');" />
Basically, this little bit of faux-CSS coding loads the filter and processes the image before displaying it. Note that you must specify a height and width for the area that the image will fill (this is known in CSS as a "bounding box"). However, if you always write valid code, you will have included this information already.
You have a few options with this filter to control how IE processes the image. These are especially useful if you are using PNG files to create a transparent background for an element. If you put the following words as the value for "sizingMethod" you will get the following effects:
- crop: this crops off the edges of the image that don’t fit into the bounding box
- image: this is the default, and resizes the bounding box to fit the image
- scale: this scales (up or down) the image to fit the bounding box
Unsurprisingly, this is not a piece of valid CSS, and if you put this in your document, it will no longer validate properly. The solution? Conditional Comments. As I explained in a previous post, you can use another piece of proprietary IE functionality to hide the offending, IE-specific coding from other browsers and the W3C validation tools. I would suggest moving the information out of the actual HTML tag and into an external CSS file that you could pull up in IE only. Here’s what that might look like:
from the head section of your HTML file
<link href="stylesheets/styles.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE7]>
<link href="stylesheets/iefix.css" media="all" rel="stylesheet" type="text/css" />
Overall, PNG images are the way to go, and as we move farther and farther into faster loading web sites that need to look just as slick as print media, you’ll find that PNG images can fulfill those needs. And now that you’re equipped with this little trick, your your new designs will be supported by all the modern browsers.
Check out the official documentation about the AlphaImageLoader filter from Microsoft’s site.