Web Performance Tuning

Graphics

The typical web graphic is 10KB to 20KB, which is larger than the typical 4KB of HTML in a page. The challenge with graphics is mostly how to make them smaller.

Weight watching

Make images small by reducing size in number of pixels and number of colors (8-bit is usually enough) and using a format with compression appropriate to the image. The new PNG format has excellent compression.

Java is often criticized for its long startup time and relatively large memory footprint, but large graphics composed of simple shapes consume less network bandwidth as simple Java .class files than as bitmap images. I used Java’s drawPolygon() method in an applet to encode a map of all the rail tracks in the eastern U.S. as sets of points connected by lines. This was not only smaller than a bitmap, but had the added flexibility of easy zooming and scrolling, which would not have been possible with a static image.

Consolidation

Avoid the overhead of sending multiple images by consolidating them into one, saving download time as well as display time. If each image is a link, you can make the composite into an imagemap and retain the functionality. Use a client-side imagemap, where the URL is chosen by the client, rather than a server-side imagemap, where the URL is deduced from the click coordinates by a process on the server side.

Use a cached imagemap in place of a frame for navigation to save the download of a master frame and navigation subframe.

Reuse

Reuse graphics wherever possible. The ...