Fun with CSS Sprites

Mario sprite from Super Mario Brothers

There's been a lot lately of talk in web development circles about CSS sprites lately. Using them dramatically increases the speed of downloading a webpage with several background images by reducing the amount of HTTP requests the client browser has to make. This is accomplished by consolidating each individual image into a single image. Once consolidated the background-position, height and width CSS properties are tweaked to show only the appropriate part of image. Check out articles from A List Apart and Smashing Magazine for more information and tutorials.

The fun was testing the before and after using YSlow in Firebug. The test subject was a client's website where there were four tabs with different images for three states. The CSS Sprite Generator from Project Fondue can help with the tedious task of making the sprite. The original cluster of transparent pings totaled 6.77 KB which consolidated to 3.83 KB. Combine that with the reduced HTTP requests and that's quite a savings.

Before making the sprite Yslow reports a score of 83. After making the sprite bumped that score up to 88. The total page size was reduced by 43K. This test seems to indicate it'll be worthwhile to make more sprites on this site.

Before

After

 

Leave a Reply

Your email address will not be published. Required fields are marked *