Spritify with SpriteMe

Using CSS sprites makes web pages faster, but they can take hours to create. Neophytes to this advanced performance optimization technique face the daunting challenge of trying to grasp the logic needed to convert their existing web page's background images into a spritified tribute to web performance. The bar shouldn't be so high.

SpriteMe is an open source project that helps web developers create sprites in a matter of minutes rather than hours. Its main features are:

• finds background images


• groups images into sprites


• generates the sprite image


• recomputes CSS background-positions


• injects the sprite into the current page

SpriteMe is a JavaScript bookmarklet, so it runs in all major browsers. It converts the web page to use sprites while you watch, making it easy to verify that the visual layout is preserved. It lets you drag-and-drop to re-arrange the sprite suggestions any way you want. Or, you can adopt all of SpriteMe's suggestions with one click on the "make all" button. When it's done spriting, simply save the sprite image(s) to your server and integrate the modified CSS into your stylesheets. Try the tutorial to see SpriteMe in action.

Happy spriting!



By Steve Souders, Performance Evangelist