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

sprites_sample_code