Wednesday, September 16, 2009 at 11:40 AM
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!
2 comments:
As Vladimir Vukićević has shown in his post "To Sprite or Not to Sprite" http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ CSS sprites may save some bandwidth, but at the expense of higher memory usage in the browser: Browsers don't render compressed image data, so when they download the 10KB sprite file and decompress it, you may end with an image that uses 50MB in memory. It also adds other problems: obfuscation of code, difficulty of maintainance, and something that most people forguet: Background images don’t get printed by browsers. There is another far better solution: Jar Archives http://kaioa.com/node/99. You can even add scripts and CSS to them, removing even more HTTP calls. The downside of this solution is that you have to offer a fallback for browsers that don't currently support archives.
Most goodly observation sryo ! And with Jar Archives there is no excessive memory usage or hidden code to have to, well, you are knowing this.
Post a Comment