Graphics can add character and beauty to your web site, but at a high cost to your site's performance. If visitors leave because your site is too slow, it doesn't matter how pretty it is. This week's article presents tips for using graphics without dragging down your site.
When it comes to graphics, size really does matter! Keep in mind that the majority of your visitors still use a 56K modem (or slower) to reach your site. That means every byte counts. Most design guides recommend a total page size of 40KB or less. Here are some suggestions for achieving that goal:
* Use GIF (Graphics Interchange Format) for logos, clip art, and other images with blocks of color. GIF files use a lossless compression scheme that discards duplicated information without compromising the quality of the restored image.
* Use the JPEG (Joint Photographic Experts Group) format for photographs and other images that include a color gradient or screen. JPEG files use a "lossy" compression scheme that averages adjacent pixels (this process is called interpolation) and discards duplicated information. Because interpolation loses some of the original information, the file size and quality of the restored image depends upon how much compression you apply.
* Create the image at the size you need. Don't create an image that is 600 by 400 and then display it in a 300 by 200 box. The browser still has to download the entire image.
* Reduce your color palette to use just the colors required by the image. There's no point in using a true-color palette with two color line art.
* Use colors from the Web-safe palette. There are only 216 colors that render the same across the common Web platforms. Most image editing programs offer this palette for you to use with your images.
* Avoid using graphics for text or navigation. Careful use of color and fonts makes it unnecessary to replace text with images that contain nothing but text.
* When possible, merge adjacent or related images into one larger image. Every image requires a separate connection to the Web server, which introduces extra overhead. It is faster to download one 4KB image than four 1KB images.
* Use alternate text to avoid "blank box" syndrome. Alternate text puts labels in your images so visitors can see what is going on before the page finishes loading.
In the next issue: Design tips and traps. Ideas for site features to include and those to avoid. |
