Css sprite generator




Whenever you’re working with a lot of smaller images you’re supposed to combine them into a single one called a sprite. You can get an example of what I’m talking about by looking at Google’s sprite, which has most of the little icons you’ll come across while searching.

How can you build these yourself? Well, you can try to carefully craft a grid of icons and then calculate the offsets you need to use in your CSS code, or you can take the easy way out. There are a bunch of sites out there that will assemble multiple images into a single sprite, and then they give you the CSS code you need to access those images. One of my favorite sites is Instant Sprite.

For me Instant Sprite has all of the right features, and aside from being easy to use it also takes just a few seconds to get exactly what you need. You can even change the order in which the images appear in the sprite, which many of the services don’t allow.

I recommend bookmarking Instant Sprite, and then you’ll be more likely to pull it out the next time you’re doing a little web development.

Instant Sprite Homepage