The Attributes of Web GraphicsColor, Quality, and File Size

In the business world, there's a saying that goes "we offer excellent service, exceptional quality, and cheap pricespick any two out of the three." You can apply a similar saying to Web graphics; it would sound something like "there's color, quality, and file sizepick any two out of the three." Allow us to explain.

With Web graphics, there's a delicate balance between the way an image looks when viewed on a computer screen and the time it takes to download the image so that you can view it. No matter how good the image looks, if viewers have to wait too long for a graphic to appear on their screen, their patience runs out and they click to some other Website in the blink of an eye. In general, there is a direct correlation between the detail and number of colors in an image and the size of the file. A file with many colors may have a large file size, but an image with a small file size may not have enough colors or detail to look good. As a designer, your job is to find a happy mediuman image that looks good and is small enough that it downloads quickly. Luckily, you have Illustrator CS2 on your side, which has the tools you'll need to get results.

Understanding and Using Web-Safe Colors

Most designers have a swatch book by their sidesuch as a Pantone bookthat helps them choose colors to use in a design. And even though color management technologies have been getting better over the years, most people still don't trust the color they see on their computer screens. If you're designing Web graphics though, you don't have much of a choice because the computer screen is the delivery medium for your artwork. Therefore, it's entirely possible that you can choose a nice yellow color on your screen, but when someone views your Website on a different computer, that color might appear green or orange. So what's a designer to do?

Although the argument can be made that file size isn't that important anymore because of the growing population of broadband internet installations, remember that many people still have slower dialup connections (especially outside of the United States). In addition, handheld wireless devices and Web-based cell phones are becoming increasingly popular, and those devices have much slower download capabilities.

With a little bit of information and some simple math, it's possible to narrow the number of colors that you might use to ensure that your color looks decent on someone else's computer screen. Although there are all types of computers and graphics cards out there, the minimum number of colors that a system supports is 256 (also referred to as VGA). However, not all computer systems use the same set of 256 colors. In fact, Windows-based computers use a different system-set of colors than Mac-based computers (not surprising). The good news is that of these two mainstream systems, only 40 colors are different, which leaves 216 common colors. This means that if a designer were to use one of these 216 colors, referred to as Web-safe colors, they would be assured that their artwork would display properly on just about any computer.

Illustrator can help you choose from these Web-safe colors in several ways. First, you can load a custom palette that contains all 216 Web-safe colors by choosing Window > Swatch Libraries > Web (Figure 10.1). Illustrator also features a color palette called VisiBone2, which displays Web-safe colors in a more intuitive way (Figure 10.2). Alternatively, you can choose Web Safe RGB from the Color palette menu, which allows you to choose Web-safe colors using the color ramp, the RGB sliders, or by directly entering their hexadecimal values. If you are using the regular RGB sliders in the Color palette, Illustrator lets you know when a color is not a Web-safe color by displaying a small cube under the color icon. If you click the cube, Illustrator chooses the closest Web-safe color for you (Figure 10.3).

Figure 10.1. Illustrator's Web palette displays all 216 Web-safe colors.

Figure 10.2. When the palette is resized correctly so that there are white swatches in each of the four corners, the VisiBone2 palette displays the 216 Web-safe colors in a way that closely matches a color wheel, making it easier to use when designing.

Figure 10.3. A small cube in the Color palette indicates when a chosen color is not a Web-safe color. You can have Illustrator snap to the closest Web-safe color by clicking the cube.

Maximizing Image Quality on the Web

Overall, there are two things that affect the appearance of Web graphicsdithering, 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 ditheringa 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 10.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 10.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 usesin 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 10.5).

Figure 10.5. Pictured here are identical vector objects. The object on the right has anti-aliasing turned on, resulting in a smoother appearance onscreen.

Using Pixel Preview mode

When you save or convert your vector graphic to a raster format, Illustrator can apply anti-aliasing (it does by default). However, when you're viewing your graphic on the Illustrator artboard, you might also want to see what your graphic looks like with anti-aliasing applied. To do so, choose View > Pixel Preview, which is a special preview mode where your graphics display on your artboard as they would when viewed in a Web browser. You can work and edit graphics in Pixel Preview mode, and you should do so when you're designing graphics for the Web.

Working in Pixel Preview mode is important because anti-aliasing can cause slight adjustments in the appearance of your graphics, like thin black lines becoming fat gray lines, or text appearing chunky or blurry (see the sidebar entitled "Disabling Anti-aliasing"). With Pixel Preview on, you can position your artwork and see results instantly.

Using Compression to Reduce File Size

The lastand possibly the most importantattribute of a Web graphic is its file size. Anyone can create great-looking graphics with large, high-resolution images, but a Web designer has to deliver the best possible graphics using low-resolution images that download fast.

For the most part, Web designers can save files in a variety of different file formats, each of which utilizes compression techniques to help reduce file size. For the most part, file formats use one of the following two types of compression: lossless, and lossy. Lossless compression reduces file size without any loss in image quality or image detail. In contrast, lossy compression reduces file size by sacrificing image data, resulting in images that have less detail. As with just about anything else in life, a designer is faced with making decisions based on what attributes are most important on an image-by-image basis. In the next section, you'll learn about all of the different file types Illustrator can utilize and the compression techniques these file types use.

Disabling Anti-aliasing

Although anti-aliasing is generally a good thing, sometimes it can work against you. The side effect of blurring edges of color is that sometimes doing so makes your graphics unsightly or your text illegible. This is especially true when your design contains small text or thin lines. Using Pixel Preview helps you see these issues before you export these graphics (Figure 10.6).

Figure 10.6. Although you may have specified a 1-point black stroke for an object, Pixel Preview mode may reveal that anti-aliasing has produced a 2-point gray stroke instead.

You may find that for some artwork, it is even beneficial to turn off anti-aliasing altogether. To do so, make your selection and choose Effect > Rasterize. Choose 72 ppi for the Resolution setting, choose None for the Anti-aliasing setting, and click OK. With Pixel Preview turned on, you will clearly see the difference between objects that do and do not have anti-aliasing disabled (Figure 10.7).

Figure 10.7. Legibility can suffer on small text when anti-aliasing is used. The text on the right has anti-aliasing disabled. Although it doesn't look as pretty, at least you can read it.