Image Transparency Explained

eLearning authoring tools are great for producing web based content without having to directly code any web languages like HTML, CSS, or JavaScript. However, the web doesn’t play nice all the time. Different browsers render things differently, and there are subtle yet numerous caveats one should be aware of.

One of those caveats is image transparency. Some image types support it, others don’t, and still others only partially. To make matters worse, there is inconsistent support in older web browsers. Let’s see if we can make some sense out of all this.

Image Transparency Basics
The main file types for the web are JPEG, GIF, and PNG. PNGs can be confusing because certain image editors like Photoshop and Fireworks can save as low quality (8bit) and high quality (24bit or 32bit). Each of these image types has a varying level of transparency support as shown below when placed over a blue background:

• JPEG: Transparency not supported
• GIF: Transparency supported (Low Quality). Matte with jagged edges
• PNG 8: Transparency supported (Low Quality). Matte with jagged edges
• PNG 24: Transparency supported (High Quality). No Matte Looks great, but can be large file sizes. Doesn't work correctly in IE6

Mattes
That ugly jagged white ring around the GIF and PNG 8 is called a matte, and will show up around any soft, anti-alias (fuzzy) edges such as drop shadows. 

One trick is to change the matte color to match whatever it will overlay. In this case, a matte color matching the solid blue background will appear as seamless as the PNG 24. However this technique’s limitation is exposed when placed over a multicolored background such as a gradient or photo.

Myth: Internet Explorer doesn’t support PNG images!
In reality, Internet Explorer 6 and below only has problems rendering high quality (alpha) transparency PNGs. Low quality PNG 8 images with transparency work fine in IE6, and PNG 24 images will still display, however any transparent areas will render as a nasty grey instead. And both versions display without any problems whatsoever when there is no transparency involved.

All other major browsers and later versions of IE don’t have any major problems with image transparency. There are numerous JavaScript workarounds available to force IE6 to display alpha transparency correctly, and thankfully it becomes less and less of an issue as IE6 usage drops.