Home Articles We've Written Web Graphics
Squeeze the Most Out of Web Graphics
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
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
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
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
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
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
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
Home Articles We've Written Web Graphics