Speeding up sites: CSS sprites for icons

4 October 09 , , , ,
Several icons combined into a single CSS sprite

These days, many sites use multiple small icons, to accompany links to Twitter, Facebook, and RSS feeds, for example. Often these are just small, 16×16 images, with a normal and hover state. On a recent site I worked on, I had the following icons as separate .png files:

  • vcard
  • Facebook
  • LinkedIn
  • Twitter
  • Sitemap
  • RSS feed
  • Contact
  • small arrow

These files took up 2.896kb, and required 8 separate http requests, each taking around 77ms, for a total of 616ms, all for tiny icons that aren’t even essential to the meaning of the page.

Combine and Smush images

So, I combined them into one tall png file (see image at right). I was able to reduce this file’s size 10% more using smush.it, so that it now weighs only 1.983kb. It requires just one http request, and the response time is 65ms.

Resources

Comment
No comments yet…Be the first!

Comments are closed for this article.