HTML & CSS: The Good Parts

Reducing Server Load with Sprites

A year after FIR started to gain notice, the webzine A List Apart published an article by Dave Shea that invoked an artifact of 8-bit gaming history: sprites. In retro gaming, these are the groups of images that together form the “landscape” of an older side-scrolling, platform-type, or overhead-view video game, and that are arranged as needed by the console hardware that runs the game.

A similar design approach can be used by stylists to combine several similar background images into a single file, with the goal of reducing server traffic and maintenance requirements.

Sprites have obvious application to navigation links. In many circumstances, site navigation can be exported to combined link and hover state bitmaps exactly as comped.

Consider a navigation setup like the one in Figure 9-6: its various items are set in bitmaps and rendered with the assistance of FIR, because the desired typeface is well outside the families of “web fonts” supported by various operating system vendors.

Figure 9-6. The intended result of applying sprites to a navigation list, as described here

The layout of bitmap exports like these can be arbitrary; in a case like this I would probably place the hover state bitmap under the default state bitmap, but you might arrange things differently. The important thing is to record the origin coordinates of each bitmap fragment, which ...