Learn About SpriteMe - generate CSS Sprites with one click

What are CSS Sprites?

Back in the day when web connections were slow and web developers were desperate to produce cool graphics and quick load times, a technique of slicing images was developed with the theory that smaller images take less time to load. That was a bit misleading. Small images took the same time to load, but the trick fooled the eye into believing it worked faster by loading small areas all over the page at once. In reality, each small image represents a separate HTTP request and lots of those on a page considerably slows load time. CSS sprites offer a way of dealing with rollover image effects without using javascript or multiple replacement images.

How CSS Sprites work

CSS sprites rely on absolute positioning to locate parts of a large image to display when called. The image loads only once, reducing the HTTP requests from multiple to one. For example, a menu with six tabs and separate rollover images for up, over, and down states representing 18 images and 18 separate HTTP requests. The drawback is that you have to do a lot of math in order to define the location of each image on the page. Luckily, there are programs that will do it for you.

SpriteME

SpriteMe is a free bookmarklet that you can use with any web page. Add it to your bookmarks toolbar, load the page you want to create a CSS sprite and click the link. The program will generate an overlay on the right side of the page listing all of your images and information. Some images may be left out of the sprite box and there will be an explanation why, but you may disagree and try it anyway by dragging the link into the sprite box. Then you just click “make sprite” and the program returns a PNG image with your combined images and the css for your page. The most efficient way to use SpriteMe is probably to build your website as you normally would and then run SpriteMe for each page and let it do the heavy lifting for you.