Webmaster in a Nutshell, Second Edition

Graphics

The typical web graphic is 10KB to 20KB, so they are much larger than typical 4KB HTML in a page. The challenge with graphics is again mostly how to make them smaller without losing much quality.

Weight Watching

Make images small by reducing size in the number of pixels and colors (8 bits is usually enough) and by using a format with compression appropriate to the image. JPEG has better compression than GIF for photos but is lossy, meaning that an image compressed into JPEG format cannot be recovered exactly. The compression is good enough that most users will not know that any information is missing. GIF has better compression than JPEG for line-oriented images because it compresses line by line of pixels. GIF is not lossy. The new Portable Network Graphics format is available in NS4.0 and IE4.0. PNG has yet better compression than JPEG or GIF.

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

Consolidation

Consolidate images to avoid the overhead of sending multiple images when you can ...