Last night I was on LinkedIn, and someone was inquiring about how to make a site backwards compatible for IE6. While I’ve been working on the web for close to a decade now, I forget that for many people, their development has really picked up in the era of IE7, and they are often shocked when they are forced to look back at IE6.

One particular area that people seem to struggle with are transparent pngs. Since every browser except IE6 supports alpha transparency, there is a strong desire to move forward with using pngs to achieve transparency. A quick google search for “transparent png ie6″ brings up a cool 721,000 results. Yes, there are plenty of work-arounds, which work to varying levels of success.

Ah yes, youngsters, I remember a day before alpha pngs were an option, when we used transparent gifs. And people were ok with this, they looked ok.

I fired up photoshop to prove I still had skills. Here it is — how to make rounded corner images as transparent gifs.

Jagged edges

Smooth edges

Gifs are limited in their color options, which makes for a small file size. The challenge can be how to display a gif on top of a background without those rough edges. It’s really quite simple, I’ve achieved the same effect with expensive commercial products like photoshop as well as free programs like gimp.

There is a pre-requisite to have some idea on which color background your image will be sitting. Because alpha transparency is not available, you need to fake it.

Step 1: Create your image.

Step 2: Create a new layer beneath this, with the same background color as what your image will be sitting on. This doesn’t need to be exact (particularly if the background is patterned), but the closer the better.

Step 3: Export for web (in Photoshop CS3, this is under File > Save for Web and Devices). You must select gif as the export format, with transparency enabled. In Photoshop, you have several options for the color table: Perceptual, Selective, Adaptive, or Restrictive (web). Do NOT select “restrictive”. (There is a useful article on the Web Developer’s Journal on what the differences in these tables mean.). You can see below the number of colors being used in creating the images based on the color table selected. This is really the secret to it all; the additional colors allow for a smoother “blend”.

So now we know what colors are going into our image, but we have a background color specified — that’s not transparent!

Step 3b: Select the pixels from which you want to “remove” the color.

Using the eyedropper tool, select the background that you want to remove. In the color table, you will see the colors you have selected is highlighted. Click on the icon at the bottom that will “map the selected color to transparent” (the checkboard patterned icon). The color in the color table that was selected will change to a “mixed state” view. This is an indication of which colors in the original image will not be rendered in the saved image. You will also be able to see the results of this in the preview pane (which is important if the color exists in the image other than just in the background!)

Step 4: Repeat as desired
You can play around with the number of colors not to include in the export. Generally, the more colors, the smoother the edge. However, when the corner is placed on a background of more than one color, you may need to be more aggressive in the amount of transparency.

Step 5: Save as .gif and enjoy!

Note: some people may think that the restrictive color palette is better, since there are fewer colors. As it is, the gif is a nice lean file format. In this example, the restrictive palette image was 228 bytes, and the selective palette with transparency came out to 365 bytes.