Transparent and Semitransparent Images

This is a question that comes up every now and then...

...so I finally managed to put this explanation to a place where I can redirect people to. My excuses for the backdrop, but this is needed to show what I'm talking about.

Imagine the average website with a fancy backdrop. There can occur problems when putting images onto such a page. I put left the borders around the images so their dimensions are visible.

Figure 1

This is the basic white logo image, completely flattened. Obviously, this is not a good solution, since the backdrop gets completely lost underneath the non-transparent image.
Figure 2

Here's an example how to do better. The image is converted into a transparent GIF, with all the semi transparent parts modified as if they were placed on a white page. This is just a trick, and if the backdrop has no dominating color we're simply lost, but if used carefully, the effect works quite well.
Figure 3

In this example, somebody with a red web page has stolen our logo! Sadly the person did a bad job.
Figure 4

Using the initial fully transparent file as a basis, we can create a new, more pleasing version.
Figure 5

Here's the fully transparent PNG version. You'll most probably see either a black image, or an image identical with the first one on top of this page, since up to now, none of the browsers that I have used support alpha channelled PNGs.

To see this image as it really is, load it into Photoshop or Gimp

Finally, I created a short german page to show this concept a long time ago. The images on that page display a more realistic use of this technique. At least, take a detailed look at the two images on that page.

Please send suggestions, corrections,
or just some blurb to mike AT lamertz DOT net