You should consider wisely which images should be cached and how. You might have various .png and .gif images; try to combine them all in one. If you have smaller images like icons, try to combine them all into one because it would not just reduce the download size and file size but would reduce the number of HTTP requests.

Think about images that are cacheable as discussed under the Adding an Expires or Cache-Control header (Simple) recipe. Cacheable images would not have to be downloaded again and again. We can achieve this goal either by doing all the mentioned steps manually by using image-editing tools, such as Adobe Photoshop or logo manager, or we can use online sprite-making tool.

If you have made a combined image using Photoshop, before writing CSS code for it, you should find out the height and width of each image using ruler tool in Photoshop, so that you can use its dimension at CSS scripts to make it work properly.

You may use MeasureIt (https://addons.mozilla.org/en-us/firefox/addon/measureit/), a Firefox add-on, to find out the exact height and width of the specified chunk of an image, as shown in following screenshot:

Let say you have created an image that consists of three small images for each option for three different events in various colors, that is, Home, About, and Contact Us are in the color green at the beginning, but once you hover on any of these three options, say About, it would turn red and when you click on it, it would turn blue. These are not just text but the images which make your website very attractive.

Let's assume, you have the following image, which is the combination of two different images and you need to write the CSS sprite code for it, so that it should only show one image at a time. At first, it should show the first button but after clicking on it, it should show the second button. Let's assume the height of each button is 50px and the width of each button is 300px and image name is sprites.png, which is at the same place where the CSS script is. This would look like the following screenshot:

Here is the CSS code for it is:

ul#button {
    height: 50px;
    list-style: none;
    margin: 0 auto;
    width: 300px;
}

ul#button li#buttonOne a {
    background: url("sprites.png") no-repeat scroll 0 -50px transparent;
    width: 300px;
}

ul#button li#buttonOne a:active {
    background-position: 0 -50px;
}

However, you don't have to go through all such things, such as writing CSS sprites codes, calculating the height and width of each button, and combining all images into one. SpriteMe (http://spriteme.org/) is an online tool that finds all the images from the web page and combines it into one, re-computes CSS background positions, and generate a CSS sprite for you, which you can use in your web page directly.

Here is the suggested CSS sprite image and suggested CSS code for the packtpub.com home page:

Click on make all to combine all the listed images and then click on export CSS to use the modified code. Don't forget to remove the comments and minify before using it on the production site.