Using CSS sprites isn’t a new technique, but I still see many developers not taking advantage of it. I’ve spoken before about the value of providing an experience to your user that makes sense, and we know that everyone appreciates speed. CSS sprites can give your website both of those things.

Sprite Used on
A Sprite on Deviant Art used for Navigation and More

CSS sprites is a very simple concept: instead of having many small images, we place all or most of those small images on a larger image and use it in many places.

Why Sprites Matter

spriteBy taking advantage of CSS sprites, the user will never have to wait for individual images to load. Once the main “sprite” has loaded, all the other related images in the sprite are loaded as well. Load time is reduced as your browser has to fetch less things; if your browser needs to load 50 tiny images, it still has the overhead of 50 requests. CSS sprites reduces this number greatly. The image to the right is a sprite I made using 13 individual icons from the FamFamFam Silk Icons Set. As a sprite, they are 4.51 kilobytes in size (4,620 bytes), however the thirteen icons total 7.95 kilobytes (8,144 bytes) if their individual file sizes are totaled. When considering the pre-loading effect, the file-size savings, and the fact that your browser only has to make one http request instead of thirteen, the benefits are very clearly illustrated.

The Technique

If you’ve got a CSS sprite that is applied to a button on your web page, that sprite could contain all three states for the button: normal, hover (for when the mouse is over it) and down (for when the user clicks the button). If you store all three states of the button in one sprite, then move the position of the Sprite depending on your desired look, there will be zero loading time and the user will never experience a disconnect from their browsing experience from the button flickering while the hover state image loads. When experiencing this disconnect, a user will typically report, “The button disappears when my mouse touches it, then it comes back!”, but with CSS sprites that will not happen.

A real word example

Add to Cart ButtonThis button taken from the Pathway Genomics site is a perfect example of a good CSS sprite. The actual element that houses the button is only large enough to display one of these states at a time, and when you hover over the button, the sprite image is shifted “one button’s height” up and the other state is shown instead. The effect serves to provide visual feedback to the user, while ensuring that all the involved images are present and ready to go. There is also an added bonus of reduced file-size which makes the web experience snappier.

The bottom line is: CSS Sprites will make your site load faster, reduce the chance of a flicker when a button changes state, and reduce the chance of your users hitting any speed bumps in an otherwise smooth experience, and at the end of it all, we should all care about our users and their experiences.

CSS Sprite Generators

CSS Sprite Tutorials

Reblog this post [with Zemanta]