January 28, 2021
Hot Topics:

Improve the Speed of Your Site by Using CSS Sprites

  • 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

This article was originally published on March 4, 2009

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