A GIF has “one color transparency” – a single color may be chosen as transparent in the image. This means that PhotoShop must smooth the visible edges of the image that touch the transparency against an expected background color. This is chosen by setting the appropriate “matte color” in PhotoShop when exporting the image. The application then antialiases the edges of the GIF against the expected background color, providing a smooth transition.
This works well when the chosen matte color matches the actual background that the image is placed on, and when that background is a single color. But if either of these is not true, “fringing” results, due to the fact that PhotoShop has introduced pixels of an intermediate color between the image and the expected single background color. Turning off this antialiasing effect is typically not a solution, as without the added pixels the edges of the image tend to look “jagged” or “staircases”.
In order to get around this problem, you can export a PNG with an alpha mask. An alpha mask is a selected area in an image with levels of transparency: 256 of them, to be precise, in a range from solid black (completely transparent) through levels of grey to solid white (completely opaque). Under ordinary circumstances this mask is not seen directly: instead, it has an effect on the perception of the image.
Practically, this means that a PNG with an alpha mask can be transparent against any background, without any visible fringing effects: its edges will always be smooth. It also means that a PNG can be partially transparent on top of other images or content (for example, to provide the appearance of clouds when images are layered).
We are going to create a simple alpha masked PNG in Adobe PhotoShop. As we will see, the file size of these images is often less than ideal for web pages: I would strongly recommend that you read the PNG Optimisation article in order to produce the best PNGs possible.
The simplest alpha mask is one created by PhotoShop itself; far more complex “fade” effects are possible, but for this example we’ll stick with the basics.
Step 1. Draw any solid non-rectangular shape on a PhotoShop canvas. For this example I’ve made a red circle.
Step 2. 
Turn off the visibility of the background layer. This informs PhotoShop that we will be saving a transparent image. Note: under normal circumstances I would crop this in PhotoShop right to the edges of the visible image to reduce file size and to make it easier to place on the page; I have deliberately emphasized the transparent area in this example for the purposes of illustration.
Step 3. Choose File / Save for Web and Devices. Select “2 up” mode in the window that appears.
Step 4. Select “PNG 24” as the output, with transparency on. Technically, this is now a 32-bit PNG (24 bit color, 8-bit alpha mask), although PhotoShop will claim it is still PNG-24 format. Note that when Transparency is selected in PNG-24 mode, the matte option is grayed-out: "matte" is redundant when an alpha mask is employed to manage transparency levels.
Step 5. Export the PNG image and bring it into a web page via an <img /> tag. Change the background-color of the <body> to different hues to prove that the edge of the circle is smooth against all colours.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
