Did you know- 8 Bit PNG transparency is just like an old school transparent Gif

Don’t believe me? Check it out:



There’s nothing fancy going on there at all. Here’s the full document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#png {
background: url(sample-bg.jpg);
height: 200px;
width: 200px;
}
-->
</style>
</head>

<body>
<div id="png">
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
</div>
</body>
</html>

As you can see, I’m just grabbing the images and dumping them into the doc. This fails in IE4 and Netscape 4.78. It works in everything else Browsercam offers.

This is different than 32 Bit PNG transparency (24 Bit color depth with 8 Bit alpha,) but still a useful thing to know if, like me, you’re transitioning over to PNGs from GIFs for web graphics.

Posted in Web

2 thoughts on “Did you know- 8 Bit PNG transparency is just like an old school transparent Gif

  1. Wow, thanks a lot! I was learning JSON and playing around with dynamic script tags. Until I attached a function to the window.onload event, the JSON response wasn’t getting accessed in IE7 correctly. By dynamically building that up as you did with that anonymous function, everything is cooking along in IE7, FF, and iPhone Safari! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *