Reducing HTTP requests during your site’s page load is key to improving performance. By combining multiple images into a single sprite, you are loading all of those images onto the client’s browser in a single request. If you are already on HTTP2 you can disregard this performance tip. For the rest of you, read on!
The trick is then to use css to display the appropriate image within that sprite. This is typically done by setting the sprite as the background image, along with a width and height. The key is then to find the offset of the image you want, which can be difficult even with Photoshop, particularly when the image is not rectangular. As a result, sprites are often not utilized because of the extra effort needed to position each background image.
SpriteCow allows you to upload your sprite, and select images within the sprite for which you need positions and sizes. It will automatically select the boundaries of the image you click, or allow you to select a group of images (useful for separate letters in a word). It then gives you sample css:
.sprite {
background: url('imgs/example.png') no-repeat -433px -51px;
width: 33px;
height: 33px;
}