CSS Image Sprites

Imagine packing a lunchbox for school. You could pack your sandwich in one box, your apple in a second box, your cookies in a third box, and your juice in a fourth box. That is a lot of separate containers to carry. Instead, you buy a Bento lunchbox that has small, divided sections to hold everything in one single container. A CSS image sprite is that Bento lunchbox. It combines multiple separate images (like icons or logos) into one single image file. By using background position coordinates, you instruct the browser to display only the specific section of the image you need, reducing network requests and speeding up your page load times.

In this page:

The Sprite Concept
Sizing and Position coordinates
Hover Effects with Sprites
Designing a Clean Sprite Sheet
Sprites vs. Modern Vector Fonts

The Sprite Concept

An image sprite is a single image file that contains multiple separate graphics. This technique optimizes web performance by reducing the number of server requests needed to load multiple assets on your page.

Note: Combine your website's social media and interface icons into one single sprite sheet to save server bandwidth.

Warning: Using sprites requires precise pixel coordinates; if your coordinates are slightly off, other icons will bleed into your display box.

Example: The Sprite Concept

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprite.png');
  background-color: lightgray;
}
</style>
<div class="icon">One file, multiple icons inside</div>

Sizing and Position coordinates

To display a specific icon, you define a fixed width and height on your display box, and use the background-position property to shift the sprite sheet coordinates so only your target icon aligns inside the box.

Note: Always write negative pixel coordinates (like background-position: -50px 0) to shift the background sheet to the left or top.

Warning: Any spelling errors in your coordinate values will cause the browser to display empty space or the wrong icon.

Example: Sizing and Position coordinates

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprite.png');
  background-color: lightgray;
  background-position: -64px 0;
}
</style>
<div class="icon">Shifted to reveal the third icon</div>

Hover Effects with Sprites

One of the best features of image sprites is that you can create instant, pre-loaded hover animations. By arranging your normal and hover icons next to each other on the same sheet, you can change the background-position on hover to display the highlighted state instantly.

Note: Using sprites for hover states eliminates the loading lag that happens when loading separate hover images.

Warning: Make sure your normal and hover states have identical dimensions on the sprite sheet to prevent alignment errors.

Example: Hover Effects with Sprites

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprite.png');
  background-color: lightgray;
  background-position: 0 0;
}
.icon:hover {
  background-position: 0 -32px;
}
</style>
<div class="icon">Instantly swaps to the pre-loaded hover icon below it</div>

Designing a Clean Sprite Sheet

To keep your coordinates easy to calculate, you should arrange your icons on the sprite sheet in a clean, mathematical grid structure (like using consistent 32x32px or 50x50px bounding boxes).

Note: Use a grid structure on your sprite sheet to make writing coordinate values simple.

Warning: Uneven spacing on your sprite sheet will force you to use complex, decimal-based coordinates in your CSS.

Example: Designing a Clean Sprite Sheet

css

<style>
.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprite.png');
  background-color: lightgray;
  background-position: -64px -32px;
}
</style>
<div class="icon">Coordinates are simple multiples of a consistent 32px grid</div>

Sprites vs. Modern Vector Fonts

While image sprites were historically essential for optimizing site performance, modern websites often use vector icon fonts (like Font Awesome) or inline SVGs. Vector icons scale cleanly to any size, are highly editable with CSS, and do not pixelate like sprite sheets do.

Note: Use modern vector icons or inline SVGs for clean, scalable designs, and save sprites for legacy photographic alignments.

Warning: Sprite sheets are raster images, meaning they will look blurry and pixelated when zoomed on modern high-resolution displays.

Example: Sprites vs. Modern Vector Fonts

css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<i class="fa-solid fa-star"></i>

Common Mistakes

Forgetting to write negative pixel coordinate values when shifting your background positions.
Uneven or chaotic spacing on your sprite sheet, leading to complex CSS coordinate math.
Attempting to scale sprite icons dynamically using standard font-size properties.

Chapter Summary

An image sprite combines multiple separate graphics into one single image file to reduce server requests.
Define explicit dimensions on your display box, and use background-position to shift the sprite sheet coordinates cleanly.
Sprites are raster graphics that can pixelate on retina screens; use vector icon fonts or inline SVGs for modern, scalable designs.

Browser Support

Standard image sprites and background position properties have native support across all modern and legacy web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Gallery Next Lesson → CSS Attribute Selectors