Build a Website: Working with Graphics

The best designed websites use graphics sparingly. Because high-resolution images are complex and have a large file size, when you convert them into an appropriate format for the Web, they may appear less compelling. This is one of the current limitations of the Web. Whether you are using existing artwork or creating new graphics, keep in mind that the demands and requirements of online design differ from those of other media. Even the most accomplished graphic designers may not be aware of the specific design issues involved with Web graphics.

The key to creating suitable graphics is to keep the file sizes small so they download quickly. Large graphic files take a long time to download, especially at slower modem speeds. You don't want impatient people leaving your site before they've had a chance to see your brilliant creation.

Keeping the file size small does not necessarily mean that the graphic itself must be small. The file size is determined by the amount of information in the image. A large image with only a few colors can actually have a smaller file size than a tiny graphic with many colors. Ideally, file sizes should be between 20K and 30K each. At this size, they load almost instantly. Larger images, such as a banner at the top of a page, can be as large as 75K. But at this size, the image alone can take 15 seconds to download with a 56 Kbps modem. A good rule of thumb is to keep the total sum of all the images on a page to 100K, unless you know that your target audience has broadband Internet access.

Web graphics are usually in one of two file formats: JPEG (a compression method developed by the Joint Photographic Experts Group, used for photographic images) and GIF (Graphics Interchange Format--a compression scheme developed by CompuServe).

To create or convert your graphics to a Web format, you need image editing software. If you are working on a large site, you will benefit greatly from programs designed to catalog and manage graphics and graphic elements. Sometimes this can be done with a single program, but usually it's better to use separate ones. Software ranges in price from a few dollars for shareware to more than $500 USD for professional programs like Adobe Photoshop.

Whether you use GIF or JPEG format, here are some guidelines for working with graphic files:

• Always design in RGB (red, green, blue) mode at 72 dpi (dots per inch) with an 8-bit maximum size. Many older computer monitors display a maximum of 256 colors, and this is the Web standard. The fewer colors you use, the smaller the file size will be. For example, 8 bits gives you 256 colors to play with, while 3 bits gives you only eight colors. You'll be surprised at what you can do with only eight to 16 colors; your readers will be pleased with the snappy downloading time of your pages.


• Converting existing high-resolution graphics usually means reducing the image from 300 pixels or more per inch to 72 pixels per inch. This can make a big difference in the appearance of an image, creating jagged edges, or gaps where colors have been removed. Techniques like indexing and dithering can fix these problems. Dithering or diffusion fills in missing colors in a uniform way to make the transitions between colors smoother. You should only dither an image once, because the more you dither, the blurrier the separations get between colors. In some cases, to get a clean result you may have to open the lower resolution GIF and touch it up, pixel by pixel. Also, when working with palettes, stick to either the Adaptive Palette or the System Palette.


• If your image contains large text, it may have jagged edges. Try anti-aliasing, a technique for smoothing over the jagged edges you sometimes get when fiddling with fonts in digital graphics.

Unanti-aliased text
• For snappier looking graphics, make your images transparent. This entails changing the background color to match that of the page (which more often than not is white) so your image appears to float on the page.

Last update: Jan 5, 2008