January 22, 2020
Hot Topics:

Improve the Speed of Your Site by Using CSS Sprites

  • March 4, 2009
  • By Chris Bennett
  • Send Email »
  • More Articles »

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
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

Page 2 of 2

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date