Sprite

Sprite1. When referring to a web page, a sprite is a single image that comprised of several images. The picture to the right is an example of a Computer Hope single sprite that has 12 different images used throughout the Computer Hope website. By using sprites on a webpage, load times are improved, and server stress is reduced. In the example, because the twelve images are contained in the sprite, your browser only has to make one request to the server instead of twelve.

Below is an example of a CSS class that is used to show the print page icon on Computer Hope. Each image in the sprite loads the same way, but the location of the image changes.

.print{background:url(http://cdn.computerhope.com/sprite.png) no-repeat -10px -302px

Although a sprite image and CSS code can be done manually, for users new to sprites or who do not want to fiddle with learning how to make sprites, we recommend using a sprite generator. A great free sprite generator is SpriteMe, which allows a Sprite and CSS code to be easily generated.

2. A graphic image or animated graphic image that can be moved independently with a mouse cursor or keyboard commands. An example of a sprite is the computer mouse cursor.

Also see: CSS, Graphic