CSS Sprites (How to manage your all web images using one image with CSS)
What is CSS Sprites ?
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position
CSS property can then be used to shift the visible area to the required component image.
This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.
Example in steps
Step 01
Create a one image with all necessary images included. in this example i am using Adobe Photoshop tool for creating image. It is better to use image type as .PNG

Step 02
Get measurement in each and every small images. In Adobe Photoshop there is a tool called ruler tool . You want the following measurements
- width of small images
- height of small images
- X and Y coordination of small images

in this example i want to get the measurements of text “Ranga”
it was ,
width : 77px height : 45 px
X : 1px Y : 6px ( rounded measurements)
now i am going to use the small image “Ranga” in many places in a web page using CSS and HTML .
Step 03
creating the CSS file using the above measurement
.signature { background-position:1px 6px; height:45px; width:77px; background-image:url('images/web_icons.png'); }
Step 04
use HTML to display the image part for any place in a web page
<div class="signature"> </div>
as this example you can use other small images in any place in a web page . use Photoshop tool for get measurements. its simple reusable and cool
download the source code form the below