Improve the Speed of Your Site by Using CSS Sprites, Page 2
Download the Code
You can download the code that accompanies this article here.
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|
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 email@example.com