Alpha Transparency
In a earlier post I briefly touched on a graphics technology known as “alpha transparency”. It’s a bit of an advanced topic—so if you are just starting out in web design you’ll want to save this technique for later—but once you have the basics down knowing how and when to use transparency in images really opens up new website design possibilities. In this post I will describe what it is and why it’s so great—along with some possible drawbacks.
First of all… what is alpha transparency? Simply put, alpha transparency allows you to include transparent pixels as part of an image. The beauty of this technology is that you can easily change the background of an image without having to go into Photoshop and edit the image. For example, say you have a logo that is round in shape and you wish to place it on a background which features a pattern. For simplicity, let’s say the pattern is a background image that is tiled across the entire website. Since the logo image contains transparent pixels the round logo will perfectly blend with background. The logo image can be easily moved—or the background changed completely—without requiring time consuming Photoshop work to change the background.
In effect alpha transparency allows you to construct you website using layers similar to layers in Photoshop. Historically, cartoon animation was done using a similar technique. A static background was first draw out by hand. Then artists created the cartoon characters on a clear plastic animation cell. This saved a lot of work by eliminating the need to draw the background for every frame. Through the magic of modern technology —i.e. alpha transparency—we can use use this same principle when constructing out web sites.
To help make this a little clearer I have created the following demo. What you are looking at is an image of a star that contains a transparent background. This allows you to see a background image sitting underneath the star image. Now comes the fun part… click on the background buttons and you will see that the background of the star appears to change. The reason this is possible is all due to the star image which is an alpha transparent png.
Which Graphics Files Support Transparency?
Out of the three graphics formats commonly used on the web—GIF, JPG, and PNG—only the 24 bit version of the PNG format supports alpha transparency. It is important to note that while 9 bit PNG files and the GIF format do support transparency, it’s single bit transparency and not alpha transparency. Single bit transparency means there is only one level of transparency. A pixel is either transparent or opaque. The problem is that for transparency to work for anything but square or rectangular images a range of transparent pixels, from fully transparent to slightly transparent needs to be used. A common problem with using transparent GIF images or 8-bit PNG images is they appear to have a white halo (see example below) around them due to the limitations of single pixel transparency. Convert the image to 24-bit PNG file with alpha transparency enabled and the problem will go away.
Example of the halo effect resulting form 1-pixel transparency.
Trouble in Paradise?
Now, before converting all your images to 24-bit PNG files it needs to be noted that there are a couple of possible gotcha’s. First, 24-bit PNG files are larger than 8-bit PNG files. So you’ll what to keep 24-bit PNG’s as small as possible to make sure you webpage loads as fast as possible. The second, and likely bigger hurdle is browser support of alpha transparency. The good thing is that nearly all browsers support alpha transparency. Unfortunately, the perennial troublemaker IE6 does not. Instead of allowing transparent pixels to be transparent, they show up as an ugly grey. Not a good look! Luckily the non-transparent parts of the image still display correctly so the image is usable, it’s just not attractive! The good thing is that the use of this very outdated browser is dwindling and it’s days are numbered. Even better news is that there are methods available to correct the problem using Javascript.
My favorite is DD_belatedPNG by Drew Diller. It’s relatively new solution—first released in December of 2008—to a problem that has been a stumbling block in the implementation of alpha transparent images on the web. The fix uses javascript to correct IE6‘s alpha transparency rendering ability shortcomings. The good thing is that it all happens behind the scenes for the visitor. No plug-ins are downloaded or required for a visitor to your site to see the images rendered correctly in all their transparent glory! Even better, the code uses conditional HTML which prevents the javascript code from running on non-IE6 browsers.
In Conclusion…
The ability to use alpha transparent PNG images in modern web standards based CSS/XHTML websites is an important part of a web designers toolkit. With the recent effective and reasonably simple work around for the IE6 incompatibility issue using DD_belatedPNG there really is no reason to avoid their use. Although 24-bit images are a larger than their 8-bit counterparts, used smartly they can cut down on page weight when used with tiled background images. They also can make website builds more straightforward and they can allow for some really great effects!
So, if you already have some experience building or theming websites and have not tried images utilizing alpha transparency I really recommend giving them a try.
