How to Use CSS Sprite Blogger Tutorial Example - Part 2

In part 1 of this series, we introduced the benefits of using CSS Sprite in your blogger website.We also showed five image files and explained that we will be combining them into one image using CSS Sprite. Now, visit my test blog space where I have hosted all these images into a HTML area now. They are all separate individual images and we will build a sprite with that. As expected ,when google analyzes this blog for performance it provides a recommendation for using CSS Sprite, which is evident from the screenshot below;

Google Recommendation for Using CSS Sprite on Test Blog

As a first step to this, we have to construct an image that is a sprited one. There are some key recommendations when constructing a sprited image;

1.You should sprite images that needs to be loaded together.
2.Sprite GIF and PNG images first.
3.Sprite small images first.
4.Sprite images that can be cached by the web browser.
5.Minimize the amount of empty space in the sprited image.

We will follow some of them for this tutorial. A sprited image for our case is provided below;

Single Sprited Image

Now, this image is of size 2Kb. When we used five individual images, the total size was 5Kb. We have brought this down to 2Kb and one HTTP request to load them all in one go. But, how to do this?

In the final part of this tutorial series, we will see how to bisect this image into five different sections by using the new technique.