Considering the complexity of a typical website today, it is not always easy to keep at the edge of technology. Significant care must be taken at each step of the upgrade to ensure that the functionality and content of the website are improved, or at least intact.

CSS Sprites is technique which you can use to reduce the server load. It has its roots in practices used in video games to deal with detailed graphic objects while keeping game-play flowing. In this CSS based approach multiple images used throughout a website would be combined into the so-called “master image.” To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element. So when your page is loaded it will not load multiple images one by one. Rather it will download master image, one single image loaded at once. The main advantage of this approach is when you use javascript hover effect. It takes two http request and will give flickering effect when ypu don’t use css sprites. But while using sprites approach whole image is loaded with css sprites and no http request is made for hover, active or focus effects (because the image is already loaded), and no “flickering” effect occurs.