Working With PNG

Published on 2002-08-24 by John Collins.

Follow @TechLeaderPro

Note: The image demonstration on this page is compatible with Internet Explorer 5.5 or above only, as well as Netscape 6+ and Mozilla 1+.

The most promising long term alternative to the GIF graphic format is PNG (Portable Network Graphic), a patent free format that is being developed by the World Wide Web Consortium (W3C). Unlike GIF, PNG images allow for transparent, antialiased sections where the content that lies beneath the image (text or another image, for example), is visible through the translucent colours of the PNG image.

This feature is presented in the demonstration below, where the image presented is in fact a composite of two images: the JPEG image containing the man; and the PNG image containing the Sun. The Sun image is placed in the same position as the man image, but it is at a greater z-index (i.e. a higher layer for you PhotoShop aficionados!). If you cannot see the man in this demo, please refer to the above note which covers some compatibility issues.

Working with PNG on your web site

Unfortunately, there is little support for the PNG format at present. Both of the Gecko-based web browsers, Netscape 6+ and Mozilla 1+, offer full support for the format which is great news, but with an estimated 90% of people opting to use some version of Internet Explorer instead, this is exactly where the problem with implementing PNG lies.

IE 4 and IE 5 offer very limited support for PNG (with no transparency support!), while a messy filter setup was introduced in IE 5.5 to provide support for the inclusion of alpha (transparent) layers. However, this filter does cause some minor conflict with Gecko-based browsers that provide full support for the format, the reasons for this are solely the responsibility of Microsoft...

A workaround using filters

The workaround that I am about to show you, in order to effectively display PNG images in IE 5.5+ and Gecko web browsers, is purely meant as a 'hack' in order to work with PNGs, and until Microsoft get their act together, it is the most elegant solution that I could develop. Here is the HTML code from the above example:

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PNG Example</title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="john collins">
 
<style type="text/css">
#sky {position:relative; left:20%; width:400px; height:300px; background-color:#ffffff;}
</style>
 
</head>
<body bgcolor="#ffffff">
 
<div id="sky">
 
<!-- the png image for IE5.5+ -->
<img src="blank.gif" id="sun" style="position:absolute; top:0px; left:0px; width:400px;
 height:300px; z-index:3; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
 'sun.png', sizingMethod='scale');">
<!-- the png image for NS6+ and Mozilla 1+ -->
<img src="sun.png" border=0 style="position:absolute; top:0px; left:0px; width:400px; 
 height:300px; z-index:2; filter:alpha(opacity=0);">
<!-- the background jpeg for all browsers -->
<img src="man.jpg" border="0" style="position:absolute; top:0px; left:0px; width:400px; 
 height:300px; z-index:1;">
 
</div>
 
</body>
</html>

Let us look at each image and it's styles and filters in turn:

<!-- the png image for IE5.5+ -->
<img src="blank.gif" id="sun" style="position:absolute; top:0px; left:0px; width:400px; 
 height:300px; z-index:3; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
 'sun.png', sizingMethod='scale');">

Everything after the word 'filter' is the convoluted mess that makes up the PNG filter for IE. You will notice that the source for the PNG file is specified in the filter, while the image tag points to 'blank.gif'. This image does exist, it is in fact a 1x1 px transparent GIF file that is easily produced using PhotoShop. NS 6+ and Moz 1+ will also display this image, but as it is transparent and quick to load, this it not a problem.

<!-- the png image for NS6+ and Mozilla 1+ -->
<img src="sun.png" border=0 style="position:absolute; top:0px; left:0px; width:400px; 
 height:300px; z-index:2; filter:alpha(opacity=0);">

For NS 6+ and Moz 1+, there is no need for a filter. Hurray! What you see above is a standard HTML image tag with some inline styles to set position and z-index. The blue colored IE filter is employed to ensure that this version of the PNG image does not display in IE, which would display it incorrectly and obscure the image of the man beneath.

The last image, 'man.jpg', is simply a regular JPEG that is set with the lowest z-index of all in order to display it at the bottom of the layer stacking order.

Conclusion

There is no denying that PNG provides a much more professional image quality for web sites than GIF images, which are limited to 256 colours and tend to be a bit jagged around the edges. However, with a large proportion of people still using Internet Explorer 5 (39% of visitors to this site as of writing, for example), you are likely to run into compatibility problems with using the format in the near future. We can only hope that Microsoft provides full support for PNG in IE 7, as well as starting to provide support for SVG (Scalable Vector Graphics) which has already begun in Mozilla 1.

In the meantime, the solution above allows for some experimentation with the format. It provides a lot of scope for animated effects: it would be quite easy to use some JavaScript to animate the Sun in the above example to move across the horizon with the sky showing through in the background. If only I could figure out a way to get the man's shadow to rotate around his feet also...

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2002, but is left here for archival purposes.