#65 - use smaller graphics files for quick response

Speed makes a difference on the Web - the faster your pages load, the more likely you are to keep the attention of your viewer.

There are two ways to significantly increase the speed of your pages: reduce the number of graphics images, and reduce the size of graphics images. Although reducing the number of graphics images can have a dramatic effect on speed, it also diminishes the content of your site and may not be acceptable to you. Reducing the size of your graphics images is often the preferable way to speed up the response of your pages.

Sometimes you can make the same impression with a smaller image. Try decreasing the physical dimensions (height and width) of your image. Since the number of bytes is typically related to the square of these dimensions, reducing height and width can be significant.

Try using solid-color GIF images (like logos, cartoons, and text as graphics). The GIF file format is very efficient with images that have horizontal regions of solid color, so design your images accordingly.

Reduce image sizes by decreasing the number of colors in your graphics. The trick is that GIF and JPEG are indexed color formats, so the fewer colors you use, the less bits are required to store each color index.

As a general rule of thumb, I try to limit the total size of my Web pages to between 10K and 20K bytes (less than 10K if possible). This typically consists of about 2K of text and a couple of images which are less than 4K each. Most of my pages here at Website Design Tips take a total of less than 5K bytes, and I reuse my graphics (so that your browser only loads them once)!

back to Website Design Tips

Copyright 1995-2003, CyberView Ltd.