PNGImage is an ASP.NET Server side web control I developed to allow PNG images with alpha transparency channels to display correctly in Internet Explorer 5.5 and 6.  The web control automatically detects the web browser and outputs the proper HTML or CSS Style for each image.  Take a look at this webpage using different browsers to see the actual output.

As expected, IE7 now supports semi-transparent PNG images, so I've finished revising the web control to support this new browser.  The web control has also been updated to work with Visual Studio 2005 and the .Net Framework 2.0.  PNGImage 1.2 (stable) is available for download below.

Note: It's recommended that you use the TweakPNG tool to adjust your PNG images to avoid problems with colour mismatches in Internet Explorer. Read more about the TweakPNG tool here.

Here is a sample PNG Image with an alpha transparency channel.  Try resizing the web browser window if you're using IE 5/6 or scroll the window if you're using any other web browser to see how this image intereacts with the background. Background Color None Blue Green Orange Red White Black Border Color None Red Orange Yellow Green Border Width 1 2 3 4 5 6 7 8 9 10

• Inherits from the .net framework's Image control, so all the functionality of the Image web control is present in this control
• Output's the correct CSS style in IE if the extension on the image ends in PNG
• Fixes the problem where the the .NET framework's image web control does not output CSS styles (background colour and border style) on non IE browsers (ie. Mozilla, Firefox, Opera).
• Has an "Alternate Image URL" property if a really old browser is detected.  Use this property on the control to provide a GIF image with transparency so that the web page degrades gracefully on older browsers.
• Source code is included.

• To change the background color or set a border color for the image, you must specify a width and height for the image, or it may not display correctly in Internet Explorer.

If you find any problems with this control or have any suggestions for improvement, let me know, and I'll consider adding your feature or suggestion into the web control.

This control is fairly self explanatory in it's use, it behaves like the Image control that ships with the .NET framework.  This control was built using Visual Studio.NET 2003 and has been tested with the .NET Framework 1.1. and 2.0.  To use this control:

• Copy the Beno.WebControls.dll assembly into the bin folder of your project.
• Add a reference to this assembly in your project.
• Add the custom control to your ToolBar in Visual studio (right click on the toolbar and choose "Add / Remove Items..." and select the Beno.WebControls.dll file).
• Drag the control from the ToolBar onto your webpage.

  You will notice some additional properties that will need to be set for this control to work effectively on all browsers:

• ImageSpacerURL - This must be set to point to a tiny transparent 1x1 pixel GIF image.  If this property is not set, the control automatically defaults to spacer.gif.  Note: If this property points to a non existent image, Internet Explorer will display a broken image icon overtop your semitransparent PNG image.
• AlternateImageURL - Set this to an equivalent transparent GIF image.  This image will be displayed instead if the detected browser (Netscape <= 4, IE < 5.5) doesn't support semi-transparent PNG images.
• Width and Height - You need to set this property where possible.  If you don't set this, your PNG image may not display at all in Internet Explorer 5.5.

This web control is free.  You can use it in any project for any purpose whether personal or commecial without charge.  Source code is also provided so you can make modifications in case the control doesn't meet your needs.  Please download the web control for more detailed licensing and disclaimer information.

Version 1.2 (December 2006) - Updated control to support Internet Explorer 7 and .NET framework 2.0. Also fixed the code to output lower case attributes to allow for proper XHTML compliance.

Version 1.1 (February 2005) - The render method of the control was rewritten to use the WriteAttribute method instead of AddAttribute to achieve better control over the output of the web control.

Note:  The namespace and the name of the assembly in version 1.1 has changed to Beno.WebControls.  If you installed version 1.0 of this control, you might need to update any references to the older version of this control in your projects.

PNGImage version 1.2
PNGImage version 1.1
PNGImage version 1.0