Sprite Magic

There is a technique for cutting down the load time of your pages called CSS sprites. Basically, instead of loading a lot of little images into your page, you load one big image that contains all the little images. You then create a “window” using height and width for viewing a piece of the image and you move the desired piece into place using background position. That’s the quick summary. For further information on this technique, read this article on alistapart.com.

One thing I find with most of the examples on the web is that they use the technique on block level elements. That works, because you can set the width and the height of a block level element. But what if you want to use this technique for inline images, like icons? You can’t set the height on an inline element. Are you out of luck? The answer is no, but it’s not quite as neat. You have to use a blank.gif (1px by 1px) and set the width and height of the image to make the sprite window. Then you set the class name of the sprite on the image and the background image shows through. Voila! But wait, you say, why even bother if you are using an image in place of another image? Well, you really only have to load two images for all your icons on the page, the blank.gif and the large sprite image. If you have 10 icons in your page, that’s loading 8 less images. When performance is critical, this technique might just be worth it. You decide.

Here is a nice little tool for creating css sprites – the large sprite image and the css for the background positioning of the individual sprites – which makes this technique practically effortless.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s