CSS Image Sprites

Combining Multiple Images into One

1. What Is an Image Sprite?

An image sprite is a single large image that contains multiple smaller graphics (icons, buttons, etc.) laid out in a grid or row.

Instead of loading each small image separately, you load the one sprite and use CSS to display only the needed portion.

2. Why Use Sprites?

• Fewer HTTP requests → faster page loads.
• Reduced bandwidth from shared headers & compression.
• Simpler caching — one file to manage instead of many.

3. Example:

Source Code: