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 ...
Get Web Performance Tuning now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.