Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is CSS sprites and how to implement them on a page?
CSS sprites are a technique used to reduce the number of HTTP requests by combining multiple images into a single image file. Instead of loading several individual images, the browser downloads one sprite sheet and displays different portions using CSS background-position property.
Syntax
.element {
background-image: url('sprite-sheet.png');
background-position: x-offset y-offset;
width: image-width;
height: image-height;
}
Benefits of CSS Sprites
The main advantages of using CSS sprites include
- Reduced HTTP requests: Multiple images are loaded with a single request
- Improved performance: Faster page loading due to reduced server requests
- Bandwidth savings: One optimized file is often smaller than multiple separate files
- Better caching: Single sprite sheet is cached once and reused
Example 1: Logo Sprites
This example demonstrates how to extract different parts of a logo image using CSS sprites
<!DOCTYPE html>
<html>
<head>
<style>
.logo-icon {
width: 70px;
height: 69px;
background: url('/static/images/logo.png') no-repeat;
background-position: -10px 7px;
display: inline-block;
margin: 10px;
}
.logo-text {
width: 270px;
height: 69px;
background: url('/static/images/logo.png') no-repeat;
background-position: -78px 7px;
display: inline-block;
margin: 10px;
}
.original-image {
max-width: 300px;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Using CSS Sprites to Extract Multiple Images</h3>
<h4>Original Combined Image:</h4>
<img src="/static/images/logo.png" alt="TutorialsPoint Logo" class="original-image">
<h4>Extracted Sprites:</h4>
<div class="logo-icon"></div>
<div class="logo-text"></div>
</body>
</html>
The original logo image is displayed, followed by two separate div elements showing the extracted icon and text portions of the logo using different background positions.
Example 2: Image Gallery with Sprites
This example creates an image gallery using a single sprite sheet containing multiple nature images
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin: 20px 0;
}
.sprite-image {
width: 200px;
height: 200px;
background: url('/images/nature-sprites.jpg') no-repeat;
border: 2px solid #ddd;
border-radius: 8px;
}
.image1 { background-position: 0px 0px; }
.image2 { background-position: -220px 0px; }
.image3 { background-position: -440px 0px; }
.image4 { background-position: 0px -220px; }
.image5 { background-position: -220px -220px; }
.original {
max-width: 100%;
height: auto;
margin: 20px 0;
}
</style>
</head>
<body>
<h3>Nature Image Gallery Using CSS Sprites</h3>
<h4>Original Sprite Sheet:</h4>
<img src="/images/nature-sprites.jpg" alt="Nature Sprite Sheet" class="original">
<h4>Individual Images from Sprite:</h4>
<div class="gallery">
<div class="sprite-image image1"></div>
<div class="sprite-image image2"></div>
<div class="sprite-image image3"></div>
<div class="sprite-image image4"></div>
<div class="sprite-image image5"></div>
</div>
</body>
</html>
A grid gallery displaying five separate nature images extracted from a single sprite sheet, each positioned using different background-position values.
Example 3: Interactive Social Media Icons
This example shows how to create clickable social media icons using CSS sprites
<!DOCTYPE html>
<html>
<head>
<style>
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.social-icon {
width: 50px;
height: 50px;
background: url('/images/social-sprites.png') no-repeat;
background-size: 250px 100px;
transition: transform 0.3s ease;
border-radius: 50%;
}
.social-icon:hover {
transform: scale(1.1);
}
.facebook { background-position: 0px 0px; }
.twitter { background-position: -50px 0px; }
.instagram { background-position: -100px 0px; }
.linkedin { background-position: -150px 0px; }
.youtube { background-position: -200px 0px; }
.original-sprite {
max-width: 300px;
margin: 20px 0;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h3>Social Media Icons Using CSS Sprites</h3>
<h4>Original Sprite Sheet:</h4>
<img src="/images/social-sprites.png" alt="Social Media Sprite Sheet" class="original-sprite">
<h4>Interactive Social Icons:</h4>
<div class="social-icons">
<a href="https://facebook.com" target="_blank">
<div class="social-icon facebook" title="Facebook"></div>
</a>
<a href="https://twitter.com" target="_blank">
<div class="social-icon twitter" title="Twitter"></div>
</a>
<a href="https://instagram.com" target="_blank">
<div class="social-icon instagram" title="Instagram"></div>
</a>
<a href="https://linkedin.com" target="_blank">
<div class="social-icon linkedin" title="LinkedIn"></div>
</a>
<a href="https://youtube.com" target="_blank">
<div class="social-icon youtube" title="YouTube"></div>
</a>
</div>
</body>
</html>
Five clickable social media icons are displayed in a row, each extracted from a sprite sheet. Hovering over an icon creates a scale effect, and clicking opens the respective social media platform.
Key Implementation Tips
- Use
background-positionwith negative values to shift the sprite image - Set exact
widthandheightto crop the desired portion - Use
background-sizeto scale the entire sprite if needed - Organize sprite sheets with consistent spacing for easier positioning
Conclusion
CSS sprites are an effective technique for optimizing web performance by reducing HTTP requests. By combining multiple images into a single sprite sheet and using background-position to display specific portions, you can significantly improve page loading speeds while maintaining visual quality.
Updated on: 2026-03-15T17:15:50+05:30
254 Views
Advertisements