A Crash Course In CSS Sprites

A sprite is "a two-dimensional image or animation that is integrated into a larger scene." This definition is intentionally broad. The concept of a sprite has been around since the 1970s. It was first developed for video games and allowed an object or character on the screen to animate without repainting the entire screen. The next innovation for sprites was to include each graphic into a single file. This file is referred to as a sprite sheet, tile set, or image map. Graphics in these files were stacked in a predefined grid pattern. When software needed a specific graphic it was plucked from the grid. Fast-forward a few decades and the concept of sprites re-emerged in modern web design. Without any special modifications, CSS was able to embrace sprites and reap the benefits.

Still confused? Don't be. Let's jump into an example. A sprite sheet is simply a collection of smaller graphics contained within a larger file. The file itself it still an image. Any supported CSS file type (e.g. png, jpg, gif) can be used. Figure A below is a simple png file containing four smiley faces. Figure B demonstrates how the file is visually broken into a grid format. It's important that each graphic receives its own unimpeded predefined space. The black lines are for demonstration purposes only. In a real-world scenario the file from Figure A would be used.

Figure A

Figure B

The CSS has three important tasks. Load the entire sprite sheet, setup the position of the file, and limit the visibility of its contents. Loading the file is simple:

.smiley { background: url('smileys.png'); }

To move the file around, use the "top" and "left" position attributes to offset the background. These values can and will be negative.

.smiley { background: url('smileys.png') 0 0; }

Even though the file has been positioned, it will show everything vertically and horizontally after that position. It's important to set a height and width to guarantee only a single grid item is displayed.

.smiley { background: url('smileys.png') 0 0; height: 75px; width: 75px; }

This concept is similar to looking through a telescope. The larger world is limited to its smaller view. Figure C demonstrates the visual outcome to our smiley face sprite once all CSS is applied.

Figure C

In web design, sprites have many benefits. Outside of the previous example, they can be used in conjunction with pseudo-classes such as ":hover" to create animations. Combining graphics into a single file reduces the number of HTTP requests and overhead to the web server. Less files make website organization easier. Sprites also guarantee a more consistent experience because no additional file downloads are necessary (e.g. multiple image files). This can eliminate pre-loading images in JavaScript. Sprites reduce overall maintenance and naturally lend themselves to theming. Finally, there are no prerequisites to using sprites; therefore, they can be implemented at any point.