Fixing transparent PNGs

A "decent" percentage of Internet users might 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.

IE can also display full PNG transparency using the AlphaImageLoader. There is a cross-browser example of this at http://www.nrkn.com/alpha/, and another at http://homepage.ntlworld.com/bobosola/index.htm. However, this method only works for IE versions 5.5 and 6 (versions below 5.5 don't support AlphaImageloader, and IE7 natively supports transparent PNGs).

Fixing PNGs with GIMP

GIMP is a free program for manipulating digital images; it's available for Linux and Unix (including macOS) and Windows.

To convert a 24-bit transparent PNG with an alpha channel to indexed mode (Internet-Explorer-friendly):

• "Image > Mode > Indexed..."
• Hit "OK" (The default settings of the window that pops up should be okay.)
• Save your new file.

Note that this procedure will often produce ugly, harsh edges, which you don't want. To get smooth edges, see below.

Smooth 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:
  • Create a new layer
  • Fill it with color #eeeeee (light gray)
  • Flatten the image.
• Add transparency
  • Add an alpha channel
  • Use the select by color tool to select the gray
  • Clear it to transparency

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 GIMP you can:

• Make a normal (unindexed, RGB image with alpha channel) PNG
• Select the option to save the background-color.
• Select the desired background color before saving.

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 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

Note: Some users claim that Photoshop screws up PNG output with things like bad gamma.

To save an indexed color (8 bit or less) .png file, or any picture intended for web output, from Photoshop, use the File -> Save for Web feature. This invokes the ImageReady Save for Web screen, which allows output options to be tinkered with, and has support for presets.

It is possible to first convert an image to indexed color mode: Image -> Mode -> Indexed Color, but it is usually easier to limit the color palette upon saving and not before.

Set the output to 8 bit png, and set the number of colors, choosing Adaptive, Selective, Perceptual, or Custom Palette for conversion from 24 bit to 8 bit.

To make a transparent 8-bit png, make sure that the "transparent" tick box is in fact ticked, and in general make sure that transparency dithering is turned off.

Nasty edges

Photoshop's implementation of 8 bit png files are like gifs in that they only have one palette entry for transparent pixels. This means that like in GIMP, Photoshop saved 8 bit pngs will have "jaggies". To partially solve this, it is possible to, as in the GIMP solution, set the background color. However, the Photoshop implementation is much simpler. Just select the mask color option, and set the color picker to the color of the background the picture is intended to sit on. Adobe Fireworks supports variable alpha in it's palette but produces gradients with banding.