Sprite

Updated: 10/17/2017 by Computer Hope

A sprite may refer to any of the following:

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 web page, 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(https://www.computerhope.com/cdn/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. Another fantastic solution is SpritePad that has a paid option for auto arranging, saving, and collaborating on sprites.

Related pages

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.

CSS, Graphic, Icon, Web design terms