Making and displaying transparent gif's on your web page.

Although some graphics displayed on this site are in jpg format, the vast majority are in
transparent gif format. The reason for the prevalent use of transparent gif's on web pages
will become evident as you read on.


For those of you who will be downloading your graphics rather than making your own gif's,
I urge you to read through all the pages. A basic understanding of how graphics are displayed on a monitor
and just what a transparent gif is, what it does and why, will help you make choices resulting in a better
display of the graphics you will be downloading and displaying on your web site. On the last page we will deal
specifically with displaying downloaded graphics.

For those of you planning to make your own graphics using your favorite graphics program.
This tutorial is meant to give you the basic understanding of a transparent gif's properties, and what you will be
trying to accomplish when saving your gif using your graphic editor.

How graphics are displayed on your monitor

Think of your monitor as a large grid of squares, each square capable of displaying a single color only. These
squares are referred to as pixels.Horizontal and vertical lines will be displayed clear and sharp. However displaying curved or angled lines presents a problem. Since colors are displayed as squares they must be stepped or "stair cased " in order to represent a curve or angle. This stair casing in graphic terminology is called aliasing. The two figures below will illustrate what I mean.


Again, horizontal and vertical lines are sharp and clear, curved or angled lines are jagged.


Same figure magnified to show how straight and curved lines (aliased) are displayed.

Antialiasing

Since we are stuck with a square pixel display at least for now, the only way to smooth
out those jagged lines is through what is basically an optical illusion. Most graphic programs
in use today utilize a feature called antialiasing when creating graphics. Note that the figures
above contain two colors, graphic (black) and background (white). When antialiased, pixels
will be added in varying shades from what ever color the graphic is to whatever color the
background is. In this case from graphic (black) to background (white) ie..varying shades of
gray. See figures below.

The antialiased graphic on the right does indeed seem to have smoother curved lines. The
magnified view below will better illustrate why.

In this magnified view you can see the added gray shaded pixels on the antialiased graphic to
the right that when viewed at normal magnification give the illusion of a sharper curved line.
For obvious reasons antialiased graphics are what you are most likely to encounter when
downloading graphics. They look better.


Next Page