Image Sprites

You will be able to combine several small images into one sprite sheet and show one icon at a time by setting an element’s size and background position.

What it is

An image sprite is a single image file that contains multiple smaller images, usually icons, arranged in a grid or row. Instead of loading home.png, search.png, and user.png separately, you load sprite.png once. CSS then “crops” the visible part by placing the sprite behind a fixed-size element and moving it with background-position.

Think of the sprite as a large sheet and the element as a small window. The window stays in the page, while the sheet slides behind it. Related terms include sprite sheet, background-position, background-repeat, and icon sprite.

Why it matters

• It reduces HTTP requests, which can help pages with many small icons.
• It can make icon loading feel more consistent because one file is cached.
• It works with plain CSS and does not require JavaScript.
• It is useful for raster icons when you need pixel-perfect control.
• It can simplify asset management by grouping related icons.

Syntax or steps

1. Create one image file, such as sprite.png, with icons placed at known coordinates.
2. Measure each icon’s width and height, and its horizontal and vertical offset from the top-left corner.
3. Give the HTML element the same width and height as the icon.
4. Set the sprite as the background image and disable repeating.
5. Use negative background-position values to move the desired icon into the element’s visible area.

The smallest useful pattern is:

.icon {
  width: 16px;
  height: 16px;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  background-position: -32px 0;
}

For a row of 16px icons, the first icon uses 0 0, the second uses -16px 0, and the third uses -32px 0.

Example

Assume sprite.png is 48px wide and 16px tall, with three 16px icons in a row: home at x=0, search at x=16, user at x=32.

<!doctype html>
<html>
<head>
<style>
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-home { background-position: 0 0; }
.icon-search { background-position: -16px 0; }
.icon-user { background-position: -32px 0; }
</style>
</head>
<body>
<p><span class="icon icon-home"></span> Home</p>
<p><span class="icon icon-search"></span> Search</p>
<p><span class="icon icon-user"></span> User</p>
</body>
</html>

Part by part:

• .icon creates a 16px by 16px window and loads the sprite once.
• display: inline-block lets the span accept width and height while staying in text flow.
• background-repeat: no-repeat prevents neighboring icons from tiling into view.
• background-position: -16px 0 moves the sprite left by 16px, revealing the second icon.
• vertical-align: middle helps the icon line up with nearby text.

Common mistakes

• Forgetting background-repeat: no-repeat. Fix: add it, or use a shorthand that includes no-repeat.
• Using an inline element without display: inline-block or display: block. Fix: set a display value so width and height apply.
• Measuring offsets from the wrong corner or ignoring padding and borders. Fix: measure from the sprite’s top-left corner and account for the element’s box model.
• Using raster sprites for icons that must scale sharply. Fix: use SVG sprites or individual SVG files when vector scaling is important.

When to use it

Image sprites are most useful for small raster icons that appear repeatedly at fixed sizes. Modern HTTP/2 reduces the cost of many requests, so sprites are less critical than they once were, but they can still help with caching and asset organization.

Practice

Guided exercise: Create a sprite with three 20px icons in a row. Write CSS for .icon, .icon-mail, .icon-chat, and .icon-settings.

Expected output: each icon appears at 20px by 20px, with offsets 0 0, -20px 0, and -40px 0.

Challenge: Arrange four 16px icons in a 2 by 2 grid. What are the offsets for the bottom-right icon?

Solution hint: The bottom-right icon starts at x=16px and y=16px, so use background-position: -16px -16px.

Quick check

Question: Why does a sprite element usually need background-repeat: no-repeat?

Answer: Without it, the browser may tile the sprite image, causing neighboring icons to appear inside the element.

Summary

Image sprites trade one larger image file for many smaller requests. The transferable idea is to use a fixed-size element as a window and move a background image behind it with background-position. They are most useful for small raster icons, while SVG sprites are often better for scalable icons.