Are you Insane?

CSS Sprites are a great way to reduce the size (well, depends) and http requests (definately) of your website. But it’s a pain in the ass if you have a lot of sprites. You have to make them in Photoshop, then you have to figure out the background-position in the CSS. Tedious work in my opinion.

No more. Using Project Fondue’s CSS Sprite Generator saves time and reduce mistakes. Input a zip of all your images and it will generate both the sprite image and the background positions. You can customize offsets, image file type, etc.

For those you who don’t know how CSS Sprites works, here’s an example of a sprite of my calendar girls

#content .date {
background-image:url(images/date.png);
background-repeat:no-repeat;
}

#content .Sunday {
padding:60px 0 25px;
background-position: 12px -610px;
}

#content .Monday {
padding:52px 0 52px;
background-position: 54px -243px;
}

#content .Tuesday {
padding:52px 0 52px;
background-position: 60px -923px;
}

#content .Wednesday {
padding:62px 0 42px;
background-position: 60px -1104px;
}

#content .Thursday {
padding:52px 0;
background-position: 74px -736px;
}

#content .Friday {
padding:52px 0;
background-position: 71px -60px;
}

#content .Saturday {
padding:52px 0;
background-position: 63px -426px;
}

So each date contains two classes, .date is in all the dates and uses the sprite as background. .Monday, .Tuesday, etc. are the separate classes that correspond to their respective dates and has the background-position of the background from .date. Note that in this case I had to do a little bit of calculating since I wanted to right align all my background images. In most cases you only need the x or y coordinates of background-position.

It’s an easy way to reduce load times now made easier by the wonders of programming. So be fruitful and sprite away!