The Ongoing Struggle for Smaller Graphics

Until all houses and small offices come equipped with cable modems or DSL service, Webmasters must fight a never-ending battle to keep Web sites as compact as possible. In almost all cases, this boils down to the handling of graphic content. Here are some thoughts and advice on fighting graphic bloat.

When you create Web graphics, you must always play the FSRC game: format, size, resolution, color depth. Let’s take each of these in turn.

Format

The rules of thumb for choosing between GIF and JPEG formats are well-established: use JPEG for photos and fountain fills, GIF for simpler graphics. The criteria for this advice is image quality, not file size, and sometimes you can shave a few bytes by going against the grain. Specifically, you should experiment with the JPEG format, along with a high compression value, in situations that would normally call for a GIF file. We have found that compression values in the 50 to 60 range will often result in no visible degradation with simple graphics or ones that use pure colors. Yet those JPEGs might end up as much as 50 percent smaller.

There are others who argue that JPEG files do not compress as much during download and are therefore slower even though smaller. It’s true that JPEGs aren’t as efficient during downloads, but statistical data on this is very elusive. As always, this is an ideal opportunity to experiment for yourself.

Size

When you export vector graphics for printed documents, size is relative. The Encapsulated PostScript format is designed as a scaleable format, and so is Windows Metafile. Vector graphics are all mathematical, so they scale freely without extra overhead.

Not so with bitmap graphics. The size of the original graphic in DRAW or the scanned photo or bitmap in PAINT is crucial to the entire process, and that’s why we hit this point quite hard in Chapter 20. The HTML language offers commands to size graphics, but we don’t want you depending upon them.

Figure 22.8 shows two seemingly identical graphics that were created in DRAW and displayed in a Web browser. The one on the left was created at exactly the right size, while the one on the right was created larger than needed and scaled down. The codes in the HTML file look like this:

<img src=“image1.gif”>
<img src=“image2.gif” height=325 width=320>

FIGURE 22.8  Are these two graphics identical? Hardly—the one on the left is 5KB, the one on the right almost 14KB.

While it is possible to show a large graphic at a smaller size, it is not a good practice. The image on the right is almost three times larger than necessary, and unless you get the proportions just right, image quality suffers (how’s that for irony). That is another classic case of needless file bloat.

You must also guard against the reverse situation—that of creating a graphic too small and enlarging it with the height and width commands. That is likely to result in poor image quality. There are Webmasters who insist upon using them so that the picture well—the space that the picture will consume once it draws—is the correct size, but to that we say, “Big deal.” That’s not worth the risk of mis-sizing your graphics; focus on creating your graphics the right size in the first place.

Resolution

This one is simple. Unless your graphic is very, very small, do not use resolutions higher than 96dpi. The only exception is if you are making a photo or graphic available for downloading, in which case you would handle it an altogether different way and wouldn’t need to display more than a small thumbnail of the image.

DRAW helps you out by allowing you to define a resolution for your drawing in Page Setup. Set the value there to 96 to complement the same resolution setting during export, and the export engine will accurately pick up the dimension of the graphic. This is discussed in detail in Chapter 20.

Color Depth

Do you really need 16 million colors to render a graphic? If yes, then choose JPEG and go for it—at least you made a conscientious and responsible decision. If not, though, you have a valuable opportunity to reduce cyberspace congestion. By exporting your graphics as paletted images, you can potentially reduce the number of colors in graphics (and therefore file size).

Then there is another level of aggressiveness you can take for your graphics, previously only available by going through PHOTO-PAINT. You can convert your graphics into paletted images and then apply any type of palette you want to the image, including one that has very few colors. This is a more radical process than just choosing “paletted” during export, and because it involves converting the object(s) to a bitmap, you’ll want to use a copy of the graphic.

The feather in Figure 22.9 is a good guinea pig, because it has well-defined solid colors as well as a soft shadow made up of many shades. We intentionally created a graphic with a component that is a good candidate for palette reduction (the feather) and a component that can’t do with much less than a full-color palette (the shadow).

FIGURE 22.9  Just how big of a palette does this graphic need?

DRAW does reduce the palette when you export as a paletted image, but it is fairly conservative. You can be more ambitious, by following these steps:

1.  Select the graphic and make a copy for safe-keeping. Then go to Bitmap Ø Convert to Bitmap. Accept all of the defaults; they will all be overridden by later conversions or exports.

2.  Go to Bitmap Ø Mode Ø Paletted. You will meet a scary dialog with multiple tabs and many words that you won’t understand. Fortunately, you can ignore most of them.

3.  Pull down the Palette menu and browse the choices. Click on the Preview button after each one. Try some of the different Dithering choices.

4.  Choose Optimized and enter different values under Colors, all the while clicking the Preview button for any obvious loss in color accuracy.

The magic potion in this brew is the Optimized choice, because without it, you would have to decide for yourself which colors to keep and which to remove (and starting with a 256-color palette, that could take hours). But the Optimized choice studies your image and determines the color tones that are used.