dcsimg
August 17, 2018
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.

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.

 

 


Enterprise Development Update

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

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.

Sitemap

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