Let's take a closer look at such an interesting tool as css sprites. Many experienced layout designers and webmasters are well aware of the advantages of this simple technique. The positive side of using sprites is that page loading time is significantly reduced by reducing the number of individual images. In modern layout standards, it is customary to group small icons and theme images into a special collection of images. Simply put, a sprite is a picture that includes a set of small pictures of a theme.

This way, when we group small images, we reduce the number of requests to the server. Our page loads only one image instead of 30 small ones. This gives a significant gain in loading speed.

In a nutshell: CSS Sprites are a tool for combining multiple images into a single file for use on a website to significantly improve performance. The concept of Sprite may seem a bit misleading considering you're creating a large image rather than working with small ones.

To summarize: the term "sprites" comes from a computer graphics technique most often used in video games. The idea was to store an image in memory and then display only part of that image, which was faster than fetching new images.

CSS Sprites is pretty much the exact theory: get the image once, move the background, and only display parts of it. This reduces overhead when retrieving multiple images.

There are a huge number of services on the Internet for creating sprites. You just need to type the appropriate query in a search engine. If you are too lazy to search, here are some popular resources on this topic. toptal sprite generator, inettools sprite generator. Let's say you've cut up your template, selected all the little icons, created a sprite out of it, what's next?

How to use icons from a sprite

Now let's look at the procedure for working with a sprite.

• Let's create a general class, for example, call it .sprite, the background of which is this image, which was created using the sprite.png generator. To the same class we will set the height and width, which will be the height and width of the sprite icons if they are the same size.
• For blocks where you need to use this icon, set the background offset to the desired amount using the css property background-position. More about backgrounds in the previous article.

Example:

.sprite {
 width: 30px;
 height: 30px;
 background: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 background-position: 0 -80px;
}

Good work