October 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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.

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





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel