Design considerations for the Web
Table of Contents
- Introduction
- The attributes of web graphics—color, quality, and file size
- Understanding and using web-safe colors
- Maximizing image quality on the Web
- Using compression to reduce file size
Maximizing image quality on the Web
Overall, there are two things that affect the appearance of web graphics—dithering, and anti-aliasing. We mentioned earlier how computers display different colors. Higher-end graphics cards allow computers to display many millions of colors, whereas lower-end cards restrict the display to a far smaller number of colors. Therefore, the following question arises: “If you create multicolored artwork on a high-end machine (which most designers use), what happens when that graphic is displayed on a low-end machine that can’t display all of those colors?”
Dithering
The answer is dithering—a process in which a computer simulates a color that it doesn’t have by mixing colors that it does have. For example, if you have a set of paints, you might only have a few colors, but you can create more colors by mixing the paints. Although the dithering concept is nice in theory, the results are not always great. The problem is that a computer can’t mix colors within a single pixel, and so the dithering process creates a pattern of different-colored pixels in an effort to appear as another color. Many times, this pattern is visible and can give an odd appearance to a graphic (Figure 4). In fact, the entire concept of using a web-safe color is to ensure that you’ll be using a color that won’t dither. As we’ll see later in the chapter, Illustrator contains certain settings that can control how dithering is applied to a graphic.
Figure 4: The gradient on the left has been enlarged to show the effects of dithering. Notice the pattern of pixels that are visible where colors blend into one another. The same gradient on the right however, exhibits no dithering.
Anti-aliasing
Another issue that arises with screen-rendered graphics has to do with the low resolution that a monitor uses—in most cases, 72 ppi. At such a low resolution, the eye actually sees pixels, and curved edges display with jagged edges (often referred to as “jaggies”). To make graphics look better onscreen, computers use a method called anti-aliasing to slightly blur the edges of boundaries between colors. The result is an image that looks smooth instead of jagged (Figure 5).
Figure 5: Pictured here are identical vector objects. The object on the right has anti-aliasing turned on, resulting in a smoother appearance onscreen.
