The Long and Painful Journey of PNG.
September 13, 2001
by: Charlie Walker
charlie@trainingtools.com
User Level - Intermediate 
 
  Download Printable in FullSite

On the Fringe
Fringe occurs when an object that was saved on one background color is utilized in another document that uses a different background color. The anti-aliasing that makes the outline of the rounded capsule appear smooth is composed of the various shades of the outline itself and the background that it is initially created on. It looks fine in the original document, however, if you try to utilize it in a different document, even if you've gone to the trouble of cropping the button as precisely as possible, you will find a definite ring of discernible pixels that are shades of the original background color. This can be avoided if you use a program like Adobe Illustrator to create an original work document and export multiple versions of the button on the various background colors that your site employs. This option, as you can imagine, is both time-consuming and inefficient. What if you need 9 different versions of the same button? Utilizing transparency in a GIF doesn't circumvent the problem either because there is no variable level of transparency which will accommodate anti-aliasing (see examples below). The border around the graphic will appear both jagged and chunky because the pixels are either transparent or not transparent. Hardly an alternative.

This is the problem that web designers face everyday when they use GIFs to export button images. Their website's image folders are filled with multiple versions of objects which appear throughout their website. If the object appears on two different backgrounds than there need to be two different versions of the graphic.

This whole problem of fringe and having to save multiple graphics could be completely avoided if 24-bit PNGs could be used. If the anti-aliasing around the outer edge of a graphic can be established through the use of transparency and not based on the background color upon which it was created then it follows that the graphic could be used on any background without compromising its quality. This process can be used for all kinds of graphics and isn't just for simple buttons. You could add a drop shadow to a graphic and have it sit perfectly on any background you choose.


The Long Painful Journey of PNG A Brief History
Format Support What's in it for the Designer?
On the Fringe The Buttons
The Kite The Support Issue