Improve the Speed of Your Site by Using CSS Sprites

Download the Code

You can download the code that accompanies this article here.

Conclusion

Now that you have a sample site using CSS sprites, you can see what kind of improvements you've made from a performance perspective. Following is a simple chart listing the before and after results.

	Images	Total File Size
Separate Images	8	7.24k
CSS Sprites	3	2.97k
Savings	5 requests	4.27k

Another benefit of using CSS sprites is that you allow the browser to reuse resources and reder your site much faster. This simple rounded box example is just a starting point. Be creative with your CSS sprites and combine as many images as possible based upon the category identified above. Figure 4 is an example of what can be done with a CSS sprite image that combined a total of 13 small images into a single 3.07k image. Included inside are the corners needed for backgrounds and boxes, menus, and other various separators.

Figure 4: Sample complex CSS Sprite image

About the Author

Chris Bennett is a manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com