Getting good edge transparency with an bit png image

    In order to prevent your png from looking bad in IE6 you need to use the PNG8 format (8bit PNG)

    Let’s say we have this sprite image:

    clip_image001

    In the Save For Web & Devices preview saving as PNG-24 we can see the edges of the button has a nice anti-aliased fade to transparent on the edges.

    clip_image002

    Notice however that when we switch to PNG-8 the edges start to look a bit ugly

    clip_image003

    The reason for this is that unlike PNG-24, PNG-8 only supports a single color to represent what is "transparent", this is called index transparency and is similar to what you would see if you were using a gif. PNG-24 supports alpha transparency which means it can have colors that are partically transparent, that’s why the PNG-24 version has a nice smooth edge, it uses several colors with various percentages of transparency.

    At this point you’re probably wondering if there’s a way to get a similar effect using PNG-8. The answer is yes but it’s not quite as easy as you’d hope it to be (which is why I’m writing this post).

    The first step of the process is to know roughly what background color this image will be placed on top of. If the background color is fairly close to solid or a very gradual gradient this technique seems to work very well. If you have a more hard gradient in the background you may want to just consider putting the background in your image instead of using transparency. Not ideal, I know, but that’s what you have to deal with to get things looking good in IE6 without using the proprietary filters.

    First let’s go back to our image and add in a white background. Then come back to the Save for Web and Devices dialog box. Follow these four steps to select the transparent color for your image:

  1. Select the eye dropper tool on the left
  2. Click on the color you want to be transparent using the eye dropper tool, in this case you will want to click the white background of this image.
  3. After you do this you’ll notice the color is selected in the color table on the right, you can also click the color in the color table instead of using the eye dropper if you like
  4. To make the selected color transparent click the small make transparent button below the color table (it’s the icon that looks like a grayed out checkerboard)

    At this point you’ll noticed that although the selected color has been made transparent it likely isn’t having the effect you intended.

    clip_image004

    Here I obviously still want the paper icon to be white, not transparent. I only want everything outside of the image’s interior to be transparent.

    Here is the technique I’ve used to get everything exterior to the object to be transparent.

    Cancel out of the Save for Web and Devices dialog

    Again, make sure you have set the background color to be what you intend the image to be placed on top of.

    clip_image005

    Now merge the layer with the object and the background layer together. You can do this by CTRL+clicking both layers to select them both, then select Merge Layers from the Layers menu.

    clip_image006

    clip_image007

    You should now have a single layer that contains the object and the background color.

    clip_image008

    Next select the paint bucket tool, and then select a color for the foreground that is not already contained in your image.

    clip_image009

    clip_image010

    Make sure the options for the paint bucket tool are set to the following (anti-alias unchecked, and contiguous checked)

    clip_image011

    Now click on the background of your image to paint it the new color.

    clip_image012

    Now, return to the Save for Web and Devices dialog and follow the same steps I described before to select the blue color as the transparent color. You should now see that the interior areas of the image remain white and you also have a nice anti-alaised transition to the background color. The pixelated edge that appears to here will seem to disappear once this image is placed on top of a background that is similar to your original background color (in this case white).

    clip_image013

    clip_image014

    Here’s an example of the final image being used on top of a gradient on a website. You’ll notice the edges are barely visible at a glance, however the more contrast between the intended background and the actual background the more noticeable the edges will become visible. That’s why it’s important to know your intended background color or at least keep it in mind so the edges blend in as seamlessly as possible. For more complex backgrounds you may want to consider another technique.

    clip_image015

    Even though this technique is far from perfect is definitely gives better results than using a PNG-24 with transparency in IE6

    clip_image016

    Notice here the light blue color that appears where you expect transparency in IE6 when using a PNG-24, this is because IE6 doesn’t support the alpha transparency of PNG-24.

    There also is a size / load time advantage of using PNG-8 over PNG-24. As long as you don’t need the extra color complexity (many times on the web you don’t) then PNG-8 is typically much smaller than PNG-24, usually with little to no loss of quality (depending on the image’s composition). In the case for a sprite with buttons like the one seen here the original PNG-24 was 19KB and the PNG-8 version was only 9KB, that’s less than half the size with no real visible reduction in the quality of the image.