Sprites

A sprite is one large image that contains many small images. Sprites usually include icons and various small decorative images.

Sprites are used to reduce the number of requests to the server. Each small picture is a separate request, and the fewer requests, the better. Therefore, small pictures are "glued" into one big one.

Sprites can be raster or vector. We will consider the simplest bitmap sprites.

Bitmap sprites are images in bitmap formats. Mostly JPG and PNG.

The image of a bitmap sprite is usually much larger than the element to which you want to set the background. Therefore, only part of the sprite is always displayed inside the element. The background image is shifted using the background-position property to make the desired part of the sprite visible.

See for yourself how it works.