CSS Image Sprites

What You’ll Learn

CSS image sprites combine many small images into one file. You show individual icons with background-image and background-position — reducing HTTP requests and keeping UI graphics consistent.

Introduction

CSS image sprites are a technique used to optimize web performance by combining multiple images into a single image file. This reduces the number of HTTP requests the browser makes, which can improve load times — especially on pages with many small icons.

Sprites are commonly used for icons, buttons, and other small graphics that appear repeatedly across a site. Instead of loading ten separate PNG files, you load one sprite and use CSS to reveal the correct icon.

What Are Image Sprites?

An image sprite is a single image file that contains multiple smaller images arranged in a grid or row. CSS controls which portion is visible by setting the element’s size and shifting the background with background-position.

Think of it like a window sliding over a larger photograph — the element’s width and height are the window size; background-position moves the photo behind the window.

Why Use Image Sprites?

• Reduced HTTP requests — One file download instead of dozens of tiny icon requests.
• Improved performance — Fewer round trips can mean faster first paint on HTTP/1.1 connections.
• Consistent design — All icons come from the same source file, keeping visual style aligned.
• Cache efficiency — Browsers cache one sprite; every icon on the page benefits.

How to Create an Image Sprite

Combine individual images into one file using an image editor (Figma, Photoshop, GIMP) or an online sprite generator. Icons are usually aligned horizontally or vertically with consistent spacing.

Here is a simplified diagram of a horizontal sprite with three icons:

Our browser sprite arranges six logos in one row inside a 1774×887 pixel PNG:

📝 Implementing Image Sprites in CSS

Use background-image for the sprite file, background-position to show the correct slice, and fixed width / height for the visible icon area.

/* Shared sprite setup */
.icon {
  --size: 48px;
  width: var(--size);
  height: var(--size);
  background-image: url("/images/browser-image-sprite.png");
  background-repeat: no-repeat;
  display: inline-block;
}

/* Chrome — shift background to logo center */
.icon-chrome {
  background-position: -4px -46px;
}

Key properties

🖼 Optimizing Image Sprites

When creating sprites, follow these practices:

• Compress the sprite — Use tools like TinyPNG or Squoosh to shrink file size without visible quality loss.
• Align images correctly — Consistent icon dimensions make background-position math predictable.
• Choose the right format — PNG for icons with transparency; SVG for scalable single-file icons in modern projects.
• Document coordinates — Keep a comment or map of each icon’s offset for maintainability.
• Limit sprite size — Very large sprites can slow the initial download; split into themed sheets if needed.

Examples Gallery

Four examples using /images/browser-image-sprite.png — from a single icon to a reusable sprite pattern for lists and toolbars.

.browser-icon {
  width: 48px;
  height: 48px;
  background: url("/images/browser-image-sprite.png") no-repeat -4px -46px;
  background-size: 288px 144px;
}

.sprite { /* shared base */ }
.sprite-chrome  { background-position: /* Chrome offset */; }
.sprite-firefox { background-position: /* Firefox offset */; }
.sprite-safari  { background-position: /* Safari offset */; }

<nav>
  <a href="#"><span class="nav-icon icon-chrome"></span></a>
  <a href="#"><span class="nav-icon icon-firefox"></span></a>
  <a href="#"><span class="nav-icon icon-edge"></span></a>
</nav>

.sprite--chrome { --cx: 172; --cy: 432; }
.sprite--firefox { --cx: 462; --cy: 445; }

.sprite--chrome, .sprite--firefox {
  background-position:
    calc(var(--size) / 2 - var(--cx) * var(--scale))
    calc(var(--size) / 2 - var(--cy) * var(--scale));
}

💬 Usage Tips

• Use a base class — Share background-image, size, and repeat; override position per icon.
• Measure in DevTools — Hover the sprite in the Styles panel to tweak offsets visually.
• Match icon dimensions — Element width/height should equal the icon slice size.
• Prefer SVG today — For new projects, inline SVG or icon fonts may be simpler than PNG sprites.
• Cache the sprite — Set long cache headers; the sprite rarely changes.

⚠️ Common Pitfalls

• Complex sprites — Huge sheets with hundreds of icons are hard to maintain and can slow initial load.
• Overuse — Large hero images or rarely used graphics should stay as separate files.
• Incorrect positioning — Wrong background-position shows the wrong slice of the sprite.
• Forgetting background-size — When scaling icons, the sheet must scale proportionally too.
• Missing alt text — Decorative sprite spans need aria-label or adjacent text for accessibility.

♿ Accessibility

• Provide text alternatives — Use aria-label on icon-only links or include visible labels.
• Do not rely on icons alone — Pair sprite icons with text in navigation when possible.
• Sufficient touch targets — Make clickable sprite icons at least 44×44 px on mobile.
• Focus styles — Links wrapping sprite icons still need visible :focus outlines.
• High contrast — Ensure icons remain visible on all background colors.

💡 Best Practices