Panoramio's Blog

Quick trivia:

Why do some PNG images show with weird backgrounds in Explorer ≤6?

(Remember I said Explorer. If you see these images with a white background you’re seeing them with an PNG alpha capable browser, aka “anything but explorer”.)

I hope we all know by now that Explorer doesn’t render correctly PNG images with an alpha channel (ie. with transparent parts). But, if it doesn’t render them correctly, how do it render them?

It renders them against a solid color background, instead of using the content of the page as background. And what color does it use for the background? Actually the color is inside the PNG file itself, and you can choose it!

If you use, as I do, The GIMP you can check the option “Save the background color” when you save a PNG file. That option will set as “background color” the current background color in your palette (green in the image).

Carefully choosing your background color you will be able to use your PNG files with an alpha channel if you have a solid background in your page.

Explorer handles correctly the case of a 1-bit alpha channel in the PNG images (as with GIF images), so the remaining buggy case remains 8-bit alpha channel against a non solid color page. For that one you will have to resort to Explorer filters to make it work. But be careful, filters are slow, and if you have a lot of little images using filters for the alpha channel will make your page extremelly slow to load!