Graphics provide the easiest way to introduce
unique design elements into your site, but that benefit
comes at a high cost to performance. Keep in mind that
the majority of your site visitors will be using a
dial-up connection of 56K or less. If your site is
overloaded with graphic content, you will drive those
visitors away. Here are a few tips for creating graphics for
the Web.
Use Web Graphic Formats
Because download speed is so important, your images should be as small as possible. Three main
factors affect the size of your image files:
- Dimensions: The width and height of the image,
in pixels.
- Color Depth: The number of colors used.
- Compression: The form of compression the
image uses, if any.
In general, you want to create an image that
has exactly the dimensions you need, no more
colors than necessary, and uses as much compression
as possible without making the image look bad.
GIF and JPEG
The two most common formats for graphics on the Web are GIF (Graphics Interchange Format)
and JPEG (Joint Photographic Experts Group). Each
format has characteristics that make it more useful
than the other for specific applications, so neither is
intrinsically better than the other.
Both GIF and JPEG are compressed bitmap image formats, which is what makes them so popular
for Web use. GIF uses lossless compression, which
removes redundant information from the image without sacrificing quality. JPEG uses
lossy compression, which removes redundant information and
reduces similar colors to a single average color (this process
is known as interpolation). So some of the original
information in the image is lost. With JPEG you
can usually control how much interpolation is
performed, so you can select the compression level that
produces the smallest file that still has an acceptable
display quality.
In general, you want to use a GIF file for
images that must render exactly as created and that
consist of blocks of color. Most company logos and clip
art fit these characteristics. These files typically utilize
a relatively small color palette.
JPEG files are usually used for continuous-tone images like photographs. With a photo, your eye
is much less likely to notice the artifacts introduced
by JPEG’s lossy compression scheme. As you
increase the compression level of the photo, the artifacts
become more noticeable, producing a grainy or distorted image. Your goal is to produce the
smallest image possible that still looks good on your
Web page.
Web-Safe Colors
You may not realize this, but different computer
systems render colors differently. Because of this
situation, a limited number of colors are considered
Web safe. In other words, the colors remain
consistent across all the computers that browse the Web.
When selecting colors for your Web site and generating
logo graphics, try to stick with a Web-safe palette.
Color code maps are readily available on the Internet,
and most graphics software programs include a
Web-safe color palette. Failure to do this can actually result
in pages that are unreadable on certain systems.
Many graphic designers will bristle if you
suggest they stick with Web-safe colors because it limits
their creativity and makes it harder to generate good
looking Web pages. There are, after all, only 216
colors in the Web-safe palette. That attitude can cost
you some embarrassment later when you discover
that the look you thought you achieved renders poorly
on another platform. This consideration is
particularly important for logos, clip art, font colors, and
background colors. With photographs, it can be
difficult to render something acceptable with the
limited Web-safe palette, and it usually isn’t worth the
effort to do so.
Granted, most visitors will be using Internet
Explorer on a Windows computer, but not all will,
and the situation could change over time.
Limit Image Size and Quantity
Optimizing your image files is important, but
still only part of the total picture, so to speak. You
must also be careful how you use those images on
your Web pages.
The general rule of thumb is to keep your Web pages down to about 40KB in size, total. That
includes all HTML and all graphics. Anything more than that produces a sluggish Web site that is
frustrating to navigate.
The number of images on your page is almost as important as the size of those images. Every
image requires a separate connection to the Web server,
so it takes substantially longer to download four
1KB graphics than it does to download a single 4KB graphic.
Knowing this, you can make certain decisions
that will speed up your site. For example, perhaps you
accept VISA, MasterCard, American Express, and Discover for on-line payment, and you want to put
those logos on your site. It is better to create a single
image with all four logos together than it is to use
separate images.
If you have a broadband connection to the Internet, remember that what you see is about
five times faster than what most of your visitors see.
The only way to be sure how your site performs is to
access it through a modem connection. If you think people will happily wait for your overloaded pages
to download, you’d better think again.
You will only get away with long downloads on pages specifically designated for multiple
photographs or large amounts of text. These pages
should never be in your critical navigation path, and
you should warn visitors about links that can take a
while to download.
One technique for giving visitors access to a
large number of photographs is to offer a thumbnail
page. A thumbnail page shows scaled-down versions
of your images. When visitors click on a
particular thumbnail image, you display the full sized photo
on another page.
Use Alternate Text
One of the most frustrating browsing experiences
is to go to a page that consists mostly of graphics
and offers no clue what those graphics are for. Until
your browser downloads the images, all you see is a
bunch of empty blocks.
Those blocks don’t have to be empty. In HTML, image tags have an attribute named ALT,
which stands for "alternate text." If you set this
attribute with your Web development software or manually
in the HTML, the text you specify appears in the
image block until the browser replaces the block with
the downloaded image. In some browsers, this text
also appears when you hover your mouse over the image.
Alternate text helps users navigate your site
more quickly and can be used to provide a text
interpretation of buttons or icons you use. If the graphic is
a link and you can see where it will go by reading
the alternate text, you can usually click on the
graphic immediately and move on to the next page
without having to wait for the first one to finish downloading.
Avoid Using Graphics for Navigation or Text
This recommendation will come as a big
disappointment to a lot of you. Many people are enamored
of the slick look produced by graphic pull-down
menus and rollover link graphics. However, as
mentioned earlier, all this graphic intensity comes at a high
price to performance. Each rollover requires two
graphics: the "on" graphic and the "off" graphic. Using
graphics for text is a waste of bandwidth. Most of the
time, careful use of fonts and colors can achieve the
look you desire without resorting to yet another image.
By following these tips, you’ll be rewarded with
a speedy site and happy site visitors.
