Image Sprites

• Technique to reduce server requests for loading multiple images. • Combine several small images into a single, larger image called a sprite sheet. • Instead of loading multiple individual images separately, we can load a single sprite sheet. • We can refer to individual images within the sprite sheet using CSS background positioning.

// let's say we want to show logos of our client

.logo {
  background-image: url('client-logos-sprite.png');
  background-repeat: no-repeat;
}

.client1 {
  background-position: 0 0;
}

.client2 {
  background-position: -100px 0;
}