CSS Image Sprites — Performance Optimization Guide

What are Image Sprites?

An image sprite combines multiple small graphics into one larger image file. CSS then uses background-position to show only the section you need. Historically, this reduced HTTP requests and improved page speed on icon-heavy websites.

Sprites are less essential than they used to be because modern browsers, HTTP/2, icon fonts, and SVG systems are more efficient. Still, sprites are a useful concept and may appear in legacy codebases or lightweight icon workflows.

How Sprites Work

Sprite positioning example

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url('sprites.png');
    background-repeat: no-repeat;
}

.icon-home {
    background-position: 0 0;
}

.icon-search {
    background-position: -32px 0;
}

.icon-user {
    background-position: -64px 0;
}

.icon-settings {
    background-position: 0 -32px;
}

Each icon uses the same source image but shifts the visible area with negative background offsets.

HTML Usage

Sprite markup

<span class="icon icon-home" aria-hidden="true"></span>
<span class="icon icon-search" aria-hidden="true"></span>
<span class="icon icon-user" aria-hidden="true"></span>

Advantages and Limitations

Aspect	Notes
Advantage	Can reduce image requests when many small icons are needed.
Advantage	Keeps icon graphics grouped in one asset.
Limitation	Harder to maintain when icons change often.
Limitation	Retina support and scaling can become awkward.
Limitation	SVG sprite systems are often a better modern choice.

Modern Alternatives

Today, many teams prefer inline SVG icons, SVG sprite systems, or icon components in frontend frameworks. These approaches scale better, look sharper on high-density screens, and are easier to style with CSS.

Simple SVG symbol approach

<svg style="display:none">
    <symbol id="icon-home" viewBox="0 0 24 24">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </symbol>
</svg>

<svg class="icon" aria-label="Home">
    <use href="#icon-home"></use>
</svg>

FAQ

Frequently Asked Questions

Key Takeaways

Image sprites combine many small images into one file.
background-position is used to reveal the correct icon area.
Sprites helped reduce HTTP requests in older web performance strategies.
Modern projects often prefer SVG-based icon systems instead.
Understanding sprites is still useful for legacy CSS and interview questions.