Tuesday, September 15th, 2009

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

Category: CSS, Performance

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? ;)

Posted by Dion Almaer at 12:01 am
12 Comments

++++-
4.6 rating from 48 votes

12 Comments »

Comments feed TrackBack URI

Glad this is finally public! I’ve been busting at the seams trying not to tweet about it since jQuery conference. Great job Steve!

Comment by jonathanstark — September 15, 2009

Great work, Steve. I’ve often thought about doing something like this, but never took the time to attempt it. Congrats! Any chance that a future version might be able to generate cut-and-paste CSS?

Comment by VirtuosiMedia — September 15, 2009

Just pointing out that Sprite-me has been around for a while, and has even been written up here on Ajaxian:
http://ajaxian.com/archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt

This is an important update to an already great service, but not a new one

Comment by SamGoody — September 15, 2009

@VirtuosiMedia,

Thank you for confirming that this feature isn’t available. I was thinking my morning coffee just hadn’t kicked in yet.

Pretty cool feature none the less. Would be neat if it did generate the cut-and-paste CSS, AND kept the old stuff in there, but commented out the feature. That way maintainers can get an idea what the original author was trying to do. Probably a with a line like “Sprite generated by Sprite Me”.

Right now I’ve been creating my own spites, saving them in a PSD and exporting as jpg or png. Usually takes me an extra hour to get a design done creating my own sprites which often have 5-6 digit widths… Hopefully this will save me some time. :)

Comment by blepore — September 15, 2009

This is a great tool for identifying opportunities for sprites on a page, though from what I can tell, it isn’t the best when it comes to actually creating a sprite. It seems to combine images, sets of rectangular images which vary greatly in dimensions, in very inefficient ways leading to a larger than optimal file-size on the sprite. So, I think I’ll still be creating my sprites manually.

Otherwise, fantastic!

Comment by ckorhonen — September 15, 2009

Awesome tool. Any chance we’ll see it integrated into the firebug toolbar at some point?

Comment by Ipequey — September 15, 2009

Very cool! Congrats on all the releases this week Steve.

Comment by Brad Neuberg — September 15, 2009

Brilliant! I’m awed by your impressive bookmarklet hacking.

But I too would love to see cut and paste css. How about a download option which provides you with a zip file of the sprited images and add-on css file. Possible?

Comment by juliancox — September 15, 2009

Thanks for all the positive feedback. Having just come back from The Ajax Experience, I’m awed by the community Ben and Dion have built up here on Ajaxian.

@VirtuosiMedia, @blepore, @juliancox: Yes, there’s a bug for “export CSS” on the todo list. This is going to be difficult though, esp. for a bookmarklet. I *don’t* want to output a rule based on the computed style – it would be too different from the original for the developer to easily integrate. I think I’m going to have to actually parse the raw stylesheet combined with knowledge of how the rules cascade to produce the exact text to cut&paste. This is going to be hard and I want to think through the user experience before implementing. If you have ideas on how it should work, please comment on bug #7.

@ckorhonen: My goal is for SpriteMe to generate optimal sprites using the default settings, and that’s what it does for ~70% of the sites I’ve tested. For the other ~30%, when I see the generated sprite is too big (in terms of file size), I use drag&drop to test other combinations. Even in this case, I’m so thankful for SpriteMe because I can test a dozen alternatives in under 5 minutes. But you’re right, currently you might have to tweak the suggested combinations. In most cases, combining images of different sizes doesn’t increase file size (although it will increase memory footprint). The file size issue is most often caused by crossing the 255 color boundary (see bug #17).

@lpequey: I definitely think this should be in Firebug. I’ve pinged the Page Speed team. (I hate to add yet-another-tab to Firebug. ;-)

I’m really pleased with SpriteMe. It’s been fun, and I find it saves me hours. But there’s still many improvements to be added. Keep the suggestions coming!

Comment by souders — September 16, 2009

Congratulations for the great tool. It´s very usefull!!!

Comment by ZoiaoDePeixe — September 16, 2009

There is special tool to automate CSS Sprites creation (all actions can be performed completely automatically). It’s included into Web Optimizer – http://www.web-optimizer.us/ and is available as a web service – http://sprites.in/ (you need to specify only CSS file). Right now it shows a bit better results than Steve’s one — but has completely different logic.

Comment by sunnybear — October 11, 2009

Leave a comment

You must be logged in to post a comment.