CSS Image Sprites: Improve Performance & Reduce HTTP Requests

What Are CSS Image Sprites?

A CSS image sprite is a single image file that contains multiple smaller graphics or icons. Instead of loading several individual images, you load one large image and display the required part using CSS background positioning.

Visual Example

Why Use Image Sprites?

• Performance: Fewer HTTP requests mean faster page loading.
• Efficiency: Easier to manage and update icons in a single file.
• Consistency: Keeps all graphics in one place, maintaining design harmony.

Creating an Image Sprite

1. Combine multiple icons into a single JPG or PNG or SVG file using a graphic tool (Figma, Photoshop, or free tools like SpritePad).
2. Note the position (x, y) of each icon within the combined image.

Example: CSS for Image Sprites

Assume css-image-sprites.jpg contains three icons: headphone, clock, and smile.

/* Base sprite */
.icon {
  background-image: url('css-image-sprites.jpg');
  background-repeat: no-repeat;
  display: inline-block;
  width: 48px;
  height: 48px;
}

/* Position each icon */
.icon-headphone   { background-position: -584px  -383px; }
.icon-clock { background-position: -648px  -383px }
.icon-smile   { background-position: -392px  -383px; }

Use them in HTML:

Tips & Best Practices

• Use SVG sprites for scalability and sharpness on high-DPI screens.
• Compress the sprite image for minimal file size without quality loss.
• Leverage browser caching to avoid re-downloading the sprite.
• Always add alt text for accessibility if using inline images; for decorative background sprites, ensure proper ARIA roles.