CSS Image Sprites Tutorial with Example, Optimize Images Using Sprite Sheets

Image sprites

What Are CSS Image Sprites ?

An image sprite is a single image that contains multiple smaller images (like icons or flags). Instead of loading many separate image files, your webpage loads just one sprite sheet, and you use CSS to display only the part of the image you need.

This technique:

Reduces HTTP requests (faster loading)

Improves performance and efficiency

Is great for icons, flags, buttons, logos, etc.

How to Use Image Sprites in CSS

1. Create a sprite sheet

Combine all your small images (like icons or flags) into one big image using tools like Photoshop, GIMP, or online sprite generators.

2. Use CSS to display only the required part

Use background-position to shift the visible area of the sprite.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Image Sprite Example</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      padding: 30px;
    }

    h1 {
      color: #333;
    }

    .sprite {
      background: url("sprite-flags.png") no-repeat;
      width: 255px;
      /* Width of one flag */
      height: 200px;
      /* Height of one flag */
      display: inline-block;
      margin: 10px;
      border: 2px solid #ccc;
      border-radius: 6px;
      transition: transform 0.3s;
    }

    .sprite:hover {
      transform: scale(1.05);
      border-color: #555;
    }

    .flag1 {
      background-position: 0 0;
    }

    .flag2 {
      background-position: -255px 0;
    }

    .flag3 {
      background-position: -510px 0;
    }

    .flag4 {
      background-position: -765px 0;
    }
  </style>
</head>

<body>

  <h1>Flag Image Sprite - CSS Example</h1>

  <div class="sprite flag1" title="Flag 1"></div>
  <div class="sprite flag2" title="Flag 2"></div>
  <div class="sprite flag3" title="Flag 3"></div>
  <div class="sprite flag4" title="Flag 4"></div>

</body>

</html>

Output:

Note:

Replace "sprite-flags.png" with your actual sprite image path.
Adjust background-position based on each flags x-coordinate.
The title attribute shows the flag name on hover.