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, this can help improve the overall load time of a web page and reduce strain on a server. For example, this page has six of the images used in the sprite, which means instead of your browser making six separate requests and load seven different images, it only had to make one.

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 with the location of the image changing.

.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 generators 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