CSS Image Sprites
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:
Download
0 comments