Website Sprite Images.

So if you are following websites to day, you notice the in thing seems to be sprites.

What are sprites?

Well their a collection of buttons/images held within one image, so for example if you inspect a icon image on facebook and look at the background you’ll see their sprite. Which can be classed as pretty much all their own images across the site, with enough room for hundreds more icons.

Its time to discuss reasons why you would use one of these sprites, the main reason is down to speed, the fact is instead of loading 10-20 icons separately you load them all at once making it more efficient within the way its called.

With this sprite you loose some margin for error, for example with things like Internet Explorer 6 I’m sure we’ve all done the thing of not putting sizes on images and having it mess up you’re whole site, using a sprite you have to specify a width and hight in the CSS so you loose the possibility of having them break your site design.

Hows this done then?

Easy just make your sprite then you might want to jot down the X and Y positions of where they are allowing you to find them later.

First off you want to make sure you have a spacer GIF.

<img src=”images/spacer.gif” class=”readmore” />

Thats your starting post, next comes the CSS.

background:url(‘images/sprite.png’) no-repeat scroll -20px -60px;

width:80px;

height:20px;

overflow:hidden;

Now their are more tricks than this, personally I would apply 2 classes one would have the background position and the other would have the background, this allows you to do some simple changes such as sprite name or even change the background to a GIF for things like IE6.

If you want to cut out all that finding x-y etc theirs some simple things out their to help you, like Sprite generators etc Google it and you shall find a abundant array of generators.