Tuesday, September 15th, 2009
There are a lot of tools that try to take images and sprite them, but this goes a lot further, so far that it makes it brain-dead simple to sprite.
Check out the demo to see it in action.
Look at what it is doing:
- Finds Background Images: SpriteMe makes it easy to examine the CSS background images used in the current page by listing all the background images and the elements that use them.
- Groups Images into Sprites: The logic behind spriting is complex: Background images that repeat horizontally can’t be sprited with images that repeat vertically. Repeating images that are sprited together must be the same width or height, depending on whether they repeat-x or repeat-y, respectively. Background images that are shorter than their containing block should go at the top of a vertically-stacked sprite if their position is “bottom”, but they should go at the bottom if their position is “top”.
- Generates the Sprite: Clicking “make sprite” combines the images into a sprite using the coolRunnings service from Jared Hirsch. No zipping, no uploading form – it just happens.
- Recomputes CSS background-position: Now comes the math. In Figure 1, the background-position for the #Buy element was “0% 100%”. Most sprite generation tools provide background-positions assuming every element starts off being “0% 0%”. Looking at the Alexa U.S. top 10, only 12% (56/459) of the elements that use a background image have a “0% 0%” background-position. More automated help is needed.
SpriteMe, because it runs in the web page, is able to convert the old background-position (”0% 100%”) to the exact offsets needed to use the sprite
- Injects the Sprite into the Current Page: As developers, we know it’s critical to optimize the edit-save-test cycle in whatever we’re doing. In the past, the edit-save-test cycle for spriting was painfully long: regenerating the sprite image, saving it back to the server’s “/images/” directory, editing and saving the CSS, clearing the cache, and reloading the page. SpriteMe bypasses all of that by modifying the live page as you watch.
This is awesome stuff, but does it make a difference?
Steve ran some data on the Alexa top 100 and found these savings:
Congrats on yet another awesome performance tool Steve! What tool are you going to share tomorrow? ;)
Posted by Dion Almaer at 12:01 am