How to Use CSS Sprite Blogger Example Tutorial - Part 1

In this post, we will discuss how to make use of CSS Sprites for your blogger blog. CSS Sprite is the talk of the town. It has been widely acknowledged that CSS Sprites improve the performance of your blog / website by a larger amount. So, if you have a website designed using Blogger,can you take advantage of this technique? If you run a speed test for your blogger blog using Googles Page Speed Online tool, you will see one important performance improvement tip for your blog.(combine images into CSS Sprites)

Combining images into as few files as possible using CSS sprites reduces
the number of round-trips and delays in downloading other resources, 
reduces request overhead, and can reduce the total number of bytes 
downloaded by a web page.

To understand what CSS Sprites is all about and how to make use of them in your blogger blog, consider a set of image files as provided below;







There are five simple image files, each referred by a location. If you were to use this in a blogger page (only this and the blog post) then your web browser will have to invoke 6 HTTP requests to show the page and all these images one after another. That is the bottom line principle of loading images all these days. So, how can CSS Sprite help to speed up the performance of your blog?

When you use CSS Sprites for your blog post, all you do is to construct one big image which is essentially a combination of all your tiny images. You then use the power of CSS to chunk the image on a dimension wise so that you can display only the required portion that you wish to on a particular section of your blog post. When you use CSS Sprite to display images on your blogger this way, you optimize the number of HTTP requests. (in this case it is only 2 against 6).  This way, you improve your site performance.

Ok, enough of theory..In this tutorial series, we will discuss how to use CSS Sprite for Blogspot blog posts and improve the performance of your blogs with simple examples. Keep connected to learn more in upcoming parts.