Web Safe GIF Colors, Dithering,
and Anti-Aliasing

© 2001 by Walt Howe
(last revised 24 April 2001)

When you select colors for your web pages, text, and graphics, will they look the same to everyone else who views them? There are a lot of differences in the ways that different browsers and computers display colors, and what looks good on your system may look terrible on another one. The way to be sure that everyone sees the same colors is to use web safe colors only for backgrounds, text, and GIF graphics.

If web pages could use all possible combinations of these, there would be 16 million possible colors. Unfortunately, web browsers will not handle this full range, and there are differences between different browsers and different computers. There is a limited set of 216 colors that all browsers and most computers can handle cleanly. These are the colors made up of the hexadecimal values 00, 33, 66, 99, CC, and FF or the equivalent decimal values 0, 51, 102, 153, 204, and 255. These six values produce 216 possible combinations of red, green, and blue, and they will look the same on nearly all computers.

See Lynda Weinman's 216-color chart. This chart from the home page of the author of the very good book Coloring Web Graphics gives the colors and their hexadecimal and decimal values.

Dithering. Colors outside this set of 216 are simulated on web pages by dithering, that is, combining pixels (dots) of different colors to give the effect of a new color, as illustrated below.

Dithered color

Magnified 8 times

Dithering is undesirable in web page GIF files. The way that GIF files are coded, dithering creates much larger GIF files than simiilar non-dithered ones. Dithered files are therefore slower to load. If text using a small font is displayed over a dithered background, it can be a lot harder to read, too. For clean, fast loading web pages, all GIF files should be made up only of the 216 basic colors.

Note that GIF and JPEG files use completely different coding schemes, and are used for different types of graphics. You don't need to be concerned about how many colors are used with JPEG files. See Creating Small, Fast-Loading Graphics for Web Pages for a further explanation.

Aliasing and Anti-Aliasing. Pictures on screen are made up of square pixels. When a diagonal or curved line is represented, what may look like a smooth line is actually made up of jagged lines, as shown in the magnified picture below:

This stair-step appearance is called aliasing. Aliasing is an attempt to represent a curved or diagonal line with edges that can only be horizontal or vertical.

In high resolution images, the aliasing is hard enough to see so that the eye is fooled by the jagged edges. With lower resolution, the jagged edges can be softened by a technique called anti-aliasing. Anti-aliasing inserts pixels of an intermediate color between the main image and its background. Anti-aliasing is illustrated in the magnified picture below:

The intermediate color pixels fool the eye even further and give the appearance of smoother edges. Back away from the screen a bit and compare the aliased and anti-aliased images. Which appears smoother?

Many graphics programs like PhotoShop automatically anti-alias GIF graphical images by default. There are some potential problems with this, however. First, by putting in intermediate colors, it does increase the size of a GIF file. This may or may not be acceptable. But a worse problem occurs when an anti-aliased transparent GIF picture is created against one background, but then displayed against another color background. See the results below:

The above image is exactly the same as the anti-aliased picture above it. Only the background color has been changed. You will sometimes see this halo effect around a picture on a web page. It happens when a transparent GIF is created against the wrong background color. Watch out for it on your own web pages.

Comments? Was this article useful to you? Do you have any questions, comments, corrections, or suggestions for improvement? Leave us a question or a comment in the Publishing on the Web Message Base or complete the Form below.

COMMENTS FORM

Go to Top	Go to Learning Tree