Browse DevX
Sign up for e-mail newsletters from DevX


Reference Guide: Graphics Technical Options and Decisions : Page 9

The decisions you make about file format, compression, palette, resolution, and bit depth effect both quality and download speeds




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Anti-aliasing is a technique for smoothing out jagged edges in a graphic.

Each pixel of a digital image can be one, and only one, color. This fundamental limitation would be no problem if the pixels were infinitesimally small, say 100,000,000 per screen. Unfortunately, they are much larger than that, in the range of 250,000 to 1,500,000 per screen (depending on your screen resolution). At this pixel size, an image's smooth line edges often appear jagged.

See how the curves have a case of the "jaggies"? jaggies

To get around this limitation, an illusion of "blending" is created by placing similarly colored pixels next to one another. This process of fooling our eyes into seeing smooth line edges is called anti-aliasing.

Here, are aliased and anti-aliased versions of the same image:

Aliased       Anti-aliased
Note: The edges of the anti-aliased image's curves and lines look much smoother and more professional.

Here's a zoomed-in detail of the aliased image:

This close up, you can clearly see the blocky edges of the circle (red) and oval (green) curves and the wedge (blue) line. These artifacts of aliasing are often affectionately referred to as "the jaggies."

Here's the same detail of the anti-aliased image:

You can clearly see how aliasing has blended colors along the curve/line edges to smooth them out. Note that the edge colors are blended with whatever color they happen to be next to. Thus blue is blended with white, red, and dark green; red with blue, white, dark green, and light green.

There are a couple of potential problems associated with anti-aliasing:

  • Anti-aliasing increases the file size of GIFs. Why? GIF compression works well with solid color blocks, and anti-aliasing creates non-solid color blends.
  • Anti-aliasing can cause the dreaded "fringe" effect. When you anti-alias an image, its edges are blended with their adjacent colors (as explained above). If you change an adjacent color, a fringe will appear around the corresponding edges. Observe, for example, these two transparent GIFs:

    Note: The first transparent GIF is not anti-aliased; its edges looks fine (except for the jaggies) against the black background. The second transparent GIF is anti-aliased against a white background. A white fringe appears around its edges when the background is black.

Thanks for your registration, follow us on our social networks to keep up-to-date