My site specializes in games,that is why I have to post a lot of pictures both in the body and the sidebars.but calling each image is an additional http request and slows page loading time.I'm using smart optimizer,phpspeedy plugin,minimized the image sizes,etc but nothing helped me save page loading time(wp cache,db cache are useless).people are complaining that my site is slow and I'm getting a high bounce rate.

so if I could use css sprites of images,that could help save innumerable http requests and page loading time.the only problem is that the images are linked and I don't know how to implement css spriting.So far I've been able to implement image sprites for my sidebar captions only.

In short I want to use css image sprite for all images of my site including header,background,body and sidebars and the ones in the body and sidebars are linked.Please help me,I've been looking for days to find a solution but didn't get one.

I was successful at getting this to work by using the below examples. I added a 'Get Started' button that linked to a page with the same name. You need to:
1. Create a sprite image. see http://bit.ly/12d0wp or set up similiarly in image program (I used Illustrator). Mainly set up a before/hover image 2-up (my final size is 200px wide by 100px high). You then position what gets called by properly coding coordinates in the css.
2. Upload the image to the media library.
3. Add the html to the page you want it on.

<p class="getstarted"><a href="http://socialenergizer.com/get-started/">Get Started<img class="getstarted" src="img_trans.gif" alt="" width="1" height="1" /></a></p>

4. Add the css to ATO>Add html/css inserts>CSS
}
.getstarted {
display:block;
width:200px;
height:50px;
text-indent:-9999px;
position: relative; left:795px; top:-145px;
}
.getstarted a {
display:block;
width:100%;
height:100%;
background: url(http://socialenergizer.com/wp-conten...getstarted.png) no-repeat top left;
outline:none;
}
.getstarted a:hover {
background: url('http://socialenergizer.com/wp-content/uploads/2012/07/getstarted.png') 0 -50px;
}

This was also helpful in working this out. Good luck!
http://www.w3schools.com/css/css_image_sprites.asp