Transparent PNG image

Did you ever try to create transparent PNG image and place it to the Web page?

I did, FireFox displays it correctly and IE does not. But here is a trick for IE. First of all, there should be created different HTML for both browsers. FF will use normal IMG source code, while IE will use some magic inside IMG style attribute.

Since version 5.5, IE supports some extra style features for providing transitions and filters to images. Here is example of style attribute inside <img src=”…

style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/path/image.png)"

This is not a final solution, because this should be written for IE only and that means to create logic to differentiate browsers. That logic can be placed on server side or client side. Client side version doesn’t depend on web server technology and it can be done in pure HTML. Here goes JavaScript code:

// PNG image path
var i = "/path/image.png";
// image attributes are same for both cases
var a = 'width="150" height="90" alt="alt text" title="title" border="0" ';
// style (filter) for IE
var s = 'style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + i + ')" ';
// write img tag depending IE
if (navigator.appName.indexOf("Microsoft") != -1 &&
    navigator.platform.indexOf("Win32")    != -1)
  document.write('<img ' + a + s + 'src="/my/img/b.gif" />');
else
  document.write('<img ' + a +'src="' + i + '"/>');

So, where you want to place PNG image, you should place that JavaScript code. Simple, isn’t it?

Why b.gif? Well, if there isn’t src attribute, IE will display broken image and transparent PNG image. Solution is to fake IE and tell him to display transparent GIF image. I have a transparent GIF image 1×1 pixel since time when HTML layout was realized with table cells and transparent GIF images. If you need 1px transparent GIF, here it is – right mouse click and save:

Few tips about creating PNG transparent image with GIMP. Sorry but I don’t know Photoshop that well.

1. Find an image with clear background
   • clear means one color background (needed for making selection by color)
   • suppose that you have JPG image
2. Start GIMP and load image
3. Fire up Layer Dialog
   • shortcut is Ctrl + L
   • or you can click on Dialogs (above opened image) and than on Layers
4. Add alpha channel
   • on the Layer Dialog you will see one layer named Background
   • click on it with right button and at bottom you will find Add Alpha Channel
   • transparent layer is added now
5. Select background color
   • right click on image, choose Select and then Select by color
   • cursors is changed now and click on background color
   • you have Threshold option on that tool to make selection less or more greedy
   • play with Threshold until you will be satisfied
   • Threshold level depends on background purity
   • in my case, Threshold of about 30 was quite enough
6. Delete background color
   • choose Edit and then Delete and if you followed instructions, now you should see Gray rectangles instead of background color
7. Invert selection
   • choose Select and then Invert
   • wanted object is selected now
8. Select object borders
   • choose Select and then Border
   • type in 2px
9. Make soft borders
   • object borders are pretty sharp, lets make them soft
   • choose Filter above opened image
   • choose Blur and then Gaussian Blur
   • play with Blur Radius and watch image in preview window
   • in my case I typed in 2px
10. Save image as PNG
    • now you have transparent PNG image
    • Congratulations :)

This is nice and it works, but if you want to place many transparent PNG images to the Web site, you will have a lot of JavaScript copy and paste. As programmer, I don’t like “quick and dirty” methods so I will suggest you to make a function. Function will produce JavaScript code for transparent PNG image. My background is mostly PHP and here goes my png_image PHP function:

/**
* Display transparent PNG image regardless IE or FF
*
* @param string $img image name
* @param integer $width image width
* @param integer $height image height
* @param string $id image id
* @param string $alt image alt
* @param string $title image title
*/
function png_image($img, $width, $height, $id='', $alt='', $title=''){
	// prepare attributes for both cases
	$attribute = "id=\"$id\" width=\"$width\" height=\"$height\" " .
	             "alt=\"$alt\" title=\"$title\" border=\"0\"";
	// prepare src atribute
	$src = "/my/img/$img";
	// path to transparent gif image
	$gif = "/my/img/b.gif";
	// filter
	$f = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader';
	// prepare JavaScript for transparent PNG image
	$tp  = '<script type="text/javascript">';
	$tp .= 'if (navigator.appName.indexOf("Microsoft") != -1 &&';
	$tp .= '    navigator.platform.indexOf("Win32")    != -1)';
	$tp .= "  document.write('<img src=\"$gif\" $attribute style=\"$f(src=$src)\"/>');";
	$tp .= 'else'; 
	$tp .= "  document.write('<img src=\"$src\" $attribute/>');";
	$tp .= '</script>';
	// print javascript code
	print $tp;
}

And example …

png_image('spider.png', 150, 90, 'logo_img', 'Spider', 'Spider');

… how to use png_image PHP function: