Home   Articles We've Written   Web Graphics

Squeeze the Most Out of Web Graphics

By Constance J. Petersen for Enterprise Development Magazine
Copyright 2000 Fawcette Technical Publications

Do your UI designers know how to get the most from JPEGs and GIFs while living with browsers' limitations?

Web graphics designers wrestle with an interesting set of constraints and trade-offs as they execute your plans. Knowing the tricks and strategies available to them will give you a leg up on knowing what kinds of miracles you can and can't expect from them.

First and foremost, graphics designers rarely get to specify the browser their UI will run on. Nor can they be sure of screen resolution, which could range from 1,600 by 1,200 pixels to 640 by 480—or even smaller if handhelds are included. Likewise, color settings could be anything from 32-bit True Color to 256 colors to monochrome. But you won't find any range in users' willingness to wait for those screens to paint. So the designers have to make graphics as lightweight as possible without sacrificing clarity.

At least Internet Explorer and Netscape do a great job of downloading and displaying the two most popular graphics compression algorithm formats: JPEG and GIF.

JPEG (Joint Photographic Experts Group) works well with both color and gray-scale photographic images. Some data is lost in the compressed image, so JPEG's compression algorithm is called lossy. And a decompressed JPEG gives up some of the original image's quality. So graphics designers adjust the degree of compression to strike the best balance between compressed file size and decompressed image quality.

GIF (Graphics Interchange Format) offers advantages over JPEG when your graphics feature solid blocks of color, such as those found in lettering, simple filled shapes, and line drawings. Unlike JPEG, GIF compresses without loss. It compresses out bands of color, thus achieving the most compression with simple images, and the least with complex, non-repetitive ones. Add to this the fact that GIF limits you to 256 colors at most and you'll see why designers generally stick with JPEG for photographic images.

But GIFs can have transparent areas; JPEGs cannot. Transparency helps when you want the background color or design to show through empty areas of the graphic. Also, GIFs can be animated, and JPEGs cannot. While animation can be distracting, it's often the most straightforward way to deliver dynamic information.

Web browsers are also starting to accept the newer PNG (Portable Network Graphics) compression format. I expect PNG to gradually replace GIF for Internet use. PNG handles multiple levels of transparency, saves images with a color palette or in full color, and corrects images for monitor variations. But you will have to wait for future versions of current browsers to fully exploit PNG graphics.

An image of a snowblower helps to illustrate the differences between GIF and JPEG when rendering photographic images. The JPEG version, compressed to 80 percent, is nearly as sharp as the uncompressed original BMP. Yet the 3.95K JPEG file takes up only about 7% of the BMP's 54.85K file. The GIF labeled Web 216 shows how this image will look (regardless of graphic format), on a 256-color display set. I'll discuss these color differences a bit later. Note that even though JPEGs are generally better for photographic images than GIFs, in this example the GIF labeled Adaptive is just as clear as the JPEG and the BMP. That's because I used a nearly monochromatic image, which the GIF's limited color palette can easily accommodate.

Figure 1. Four ways to show a photo. This Export Preview from Macromedia Fireworks shows how a photograph will render in four graphics formats (clockwise from top left): JPEG compressed to 80%; GIF with a browser-safe 216-color palette; GIF with an adaptive 128-color palette; and BMP (uncompressed and full-color). Note the differences in image quality, file sizes, and estimated time to download at 28.8 Kbps.

An image of some graphical text shows how GIFs come into their own with solid blocks of color, rendering them more clearly than JPEGs. The GIF image is smooth and sharp. And setting it to a 16-color palette compresses the original 28K BMP file down to 4.61K. Note how the colors in the 5.75K JPEG image are mottled.

Figure 2: GIFs beat JPEGs for solid color images. This Export Preview from Macromedia Fireworks compares a solid colored image, showing how it will render as a GIF with an adaptive 16-color palette and as a JPEG compressed to 80%. Note the differences in image quality and file sizes.

Have your cake and eat it too

The choice between JPEG and GIF isn't always clear, however. Images often include both photographic elements and solid color ones. In such cases I use a graphics tool to cut the image into individual pieces. I save each piece in whichever format works best, then reassemble the pieces into the original image in an HTML table. This process takes only a few minutes when you use Macromedia Fireworks. You can also do this with Adobe ImageReady and Microsoft PhotoDraw 2.0. Such tools can even create the HTML coding needed to reassemble the graphics in an HTML table.

Image slicing can also slice downloading times. By creating a separate image for the Model Specifications text in my snowblower graphic, I can replace just that piece on pages dealing with other Snowblower topics, such as Features, Where to Buy, and Service and Support. Obviously, only downloading the changed areas reduces downloading times dramatically--especially in cases like this where I can reuse a dense photographic image that's already in the browser's cache.

I can also speed downloading by replacing horizontal blocks of solid color with a single pixel of that color. When I reassemble these graphics into an HTML table, I can set the width and height of the tiny (43-byte) single-pixel GIF to fill in these blanks in the table.

You can also use slicing to improve the end-user's experience with your site. For example, by creating separate images for the home, about, index, and help text, I can use them as Javascripted mouseover buttons--replacing each button with a highlighted version as the mouse passes over.

Figure 3: Divide and conquer. Designers can use graphics tools such as Macromedia Fireworks to slice an image into pieces. Each piece is saved separately as either a GIF or a JPEG to achieve optimal clarity. The image pieces are then reassembled into an HTML table.

Don't dither around

A more subtle improvement of the end-user experience comes from careful color selection to eliminate dithering. When you specify colors outside the display's current palette, the system mixes in little spots of color to approximate what you specified. That's dithering, and it looks as bad as it sounds. You'd think this issue wouldn't come up when True Color displays predominate. But they aren't universal, and until you can safely abandon users on 256 color systems your designers will need to employ a technique that you might call "color slicing." Basically, this means specifying just which 216 colors the system will use. That's right, 216. That's what's left after subtracting the 40 system colors used either by Windows displays, Macintosh displays, or both.

I'll show you how this works, using our trusty snowblower photo in a full Web banner graphic. I extracted a shade of pale blue/white from the snow to use for the background color. I also selected a shade of dark blue/gray that coordinated well with the dark colors in the photo. The resulting smooth blend of coordinated colors exploits the miracle of high-resolution color displays, which use 24 bits to describe each color. Every color you see has a green, and a blue component, with each taking eight of the bits. The components take on values from 000 to 255 in decimal or 00 to FF in hex. This scheme allows for 256+, or 16.8M unique colors to choose from.

But people whose monitors are set to display 256 colors won't necessarily see a smooth blend of colors. The designer can improve the blend by preselecting colors from the browser's RGB table of colors. A browser works from the 216 colors allowed by this table to derive each chosen color's red, green, and blue (RGB) components:

For example, to specify pure red you'd set the color values to red: FF, green: 00, and blue: 00. Go outside this palette and you get dithering. To create a look that's more consistent across displays, I specified the closest colors available in the 216-color palette for the pale blue/white background and for the solid parts of the dark blue/gray text. This produced a complete banner graphic revised to make optimal use of browser-safe colors. The chart compares the text and background colors and shows how they look when dithered.

Figure 4: Make your own compromises. The top banner graphic uses large blocks of color that aren't in the browser's 216-color palette. These colors will dither on monitors set to display 256 colors. In the bottom banner graphic, these colors are replaced with the closest colors in the browser's 216-color palette. The chart compares the colors and shows how each will look when dithered.

The attractiveness of a Web graphic lies in its clarity (appropriate graphics format), cut (slicing up graphics into pieces to optimize clarity and caching), and color (browser-safe when possible)—all in a file size whose downloading times won't drive off your users. Your designers must strike the optimal balance between looks and heft.

To do so they should compress each JPEG file as much as possible without ruining image quality. For GIFs, expect them to cut down the number of colors as much as possible, and stretch single pixels to create large blocks of color. And when only part of a graphic must change from page to page, they cut the parts that change from those that don't, reusing the unchanged portions from the browser's cache.

Home   Articles We've Written   Web Graphics