Fixing transparent PNGs

Sadly, a large percentage of Internet users use Internet Explorer for Windows as their primary web browser. Among other problems, this browser doesn't properly support PNG images with alpha channel transparency. This has given rise to the myth that IE doesn't support transparent PNGs.

IE does support transparency in indexed-color PNG images in which a color is reserved for transparency: in most cases this is going to mean saving as 8-bit rather than 24-bit. This method forces sharp edges to the transparency, just like in transparent GIFs, but you'll feel more virtuous using PNGs instead of GIFs (which are still patent-encumbered in a few parts of the world, and are also generally a little bit larger in filesize.).

IE can also display full PNG transparency using the AlphaImageLoader. There is a cross-browser example of this at http://www.nrkn.com/alpha/.

Fixing PNGs with the Gimp

The Gimp is a free program for manipulating digital images; it's available for Linux and Unix (including Mac OS X) and Windows.

If you're stuck with a 24-bit transparent PNG with an alpha channel and want it to be Internet Explorer-friendly, you can load it up in the Gimp and convert it to indexed mode. (Under the "Image" menu, highlight "Mode" and then select "Indexed...". The default settings of the window that pops up should be okay; hit "OK" and then save your new file.) For more details, go here The Gimp

Nasty edges

Often this will produce ugly harsh edges, which you don't want. You want smooth pretty edges.

You can fake this for most purposes as long as you know what kind of backgrounds the image will cover; an icon or logo for a MediaWiki site will usually only sit over backgrounds of white, light grey, or light yellow. Before converting to indexed color, force the image to have a solid background by creating a new layer; fill it with color #eeeeee (light gray), and flatten the image. Use the select by color tool to select the gray and clear it to transparency (you might have to add an alpha channel first, I forget).

Now there are harsh edges between transparency and the very light gray halo around your pretty logo... when superimposed on the expected backgrounds this will look good enough. It's not perfect, but hey.

Convert to indexed color and save.

Note that these same steps work for making a GIF if you really want to. But, y'know, GIFs are bad or something.

Alternatively, with the Gimp you can make a normal (unindexed, RGB image with alpha channel) PNG and select the option to save the background-color. This way IE will display the saved background color while better browsers will display transparency as intended.

Fixing PNGs with Paint Shop Pro

These directions only apply for PSP v. 8. And maybe 7. I'm not really sure about that one, though. Load up the transparent PNG, and just like in the GIMP, create a #cccccc layer underneath. Then (this is the easy part) go to File/Export/PNG Optimizer. Select "Palette-based", and then select the "Optimized Octree" palette, and then in the Transparency tab, select "Single-color transparency", and select "Areas that match this color". Make sure tolerance is 0. Click the colored box, and enter "#CCCCCC" in the HTML code box. Then, depending on the size of the file, you can choose to interlace it or not (your choice, but big files would be better smaller), and then save it to the location of your choice. Upload it to a wiki.

Note: if a wiki has a different background color on their imageboxes, use it in the HTML code box rather than "#CCCCCC"

Optimizing download size

An 8-bit PNG (or GIF) will usually be about half the size of a 24-bit truecolor PNG of the same image. That's good!

You can also optimize download size by reducing the number of colors in the output and disabling dithering in the conversion, though don't do it at the expense of the picture looking good.

Fixing PNGs in Photoshop

Well, I wouldn't. Photoshop screws up PNG output with things like bad gamma.

The only way to save an 8 bit png from photoshop is to use the export for web feature:

File -> Save for Web (Control-Alt-Shift-S)

Otherwise, Photoshop insists on saving a 24 bit image, with an alpha channel if you use transparency.

In general, from Photoshop, whatever format you save to, it is a good idea to use Save for Web if the image is intended for the web.