CSS sprites are preferred method for reducing the number of image requests. One can combine background images into a single image and use CSS background image and background position properties to display the desired image segment. Combining inline images into your cached style sheets is a way to reduce HTTP request and reducing the size of your pages. But inline images are not yet supported across all major browsers 40-60% of daily visitors to your site come in with an empty cache making your page load faster for the first time visitors is key to better user experience.
They can be used to create buttons, banners, It is easy to use a transparent PNG image file. With simple CSS, it’s possible to build up dynamic images that look great that will have only few lines of code. Popular web sites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the loading time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and style sheets).
The impact of having many components in the page is aggravated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (may be five default states and five rollover states), we can literally combine all of them into one big long image. A designer can create a new image with size of the widest image and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now it is a one single step to place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.
The first way is while we are going with sprites from the get-go and built it as you go along. That means have a Photoshop file open, start from the upper left, and drop stuff in as you need it. If you have another icon (or whatever) that makes sense to put in a sprite drop it in there and resave it.
The other way, which perhaps makes even more sense, is to develop without thinking about sprites at all. Make everything separate individual graphics. Then when the site is completed for hosting, then you can use automated tools for creating CSS for the sprites.
CSS sprites and SEO
When a web browser goes to a website, it will make a request to the server for the required webpage. But the webpage will include references to images in its HTML code. These might be in the form of photos in blog posts or graphics to form a theme the site. All these images are separate files and it’s the browser’s duty to request each of them individually. For each image included in the page, the browser must initiate a separate request asking for that image from the server. This request is then processed by the server and the file is returned back to the browser. All this passing back and forth for individual files requires an un-necessary amount of processing and bandwidth.
CSS sprites are showing increased usage credibility in Search engine optimized web designing. CSS sprites as a technique is used by high traffic social media website like Digg and Search Engines like Yahoo. Fast loading time of these traffic rich heavy database sites makes them the favorite websites ofr surfers. Small scale businesses and large scale businesses are all now realizing that.They are now applying sprites to their website’s front end design.








Future web-role of content 







