The Ashes

Technology, Science and other news
September 16, 2009

Sprite Me! How to do CSS sprites without having to do CSS sprites

Posted by : admin
Filed under : General

Steve Souders is on a tare. First, Browserscope, and now Sprite Me.

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? 😉

Tags :

No Comments

(will not be published) (required)
(opitional) EN ES IT DE PT CZ FR RU
October 2021




There are many online poker site where you can play but at you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!