Comments on: Sprite Me! How to do CSS sprites without having to do CSS sprites

By: sunnybear

sunnybear — Sun, 11 Oct 2009 14:44:18 +0000

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.

By: ZoiaoDePeixe

ZoiaoDePeixe — Wed, 16 Sep 2009 16:32:54 +0000

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

By: souders

souders — Wed, 16 Sep 2009 15:14:23 +0000

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!

By: juliancox

juliancox — Wed, 16 Sep 2009 03:26:00 +0000

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?

By: Brad Neuberg

Brad Neuberg — Tue, 15 Sep 2009 22:18:10 +0000

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

By: Ipequey

Ipequey — Tue, 15 Sep 2009 14:37:21 +0000

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

By: ckorhonen

ckorhonen — Tue, 15 Sep 2009 13:13:14 +0000

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!

By: blepore

blepore — Tue, 15 Sep 2009 13:03:02 +0000

@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. :)

By: SamGoody

SamGoody — Tue, 15 Sep 2009 06:45:34 +0000

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

By: VirtuosiMedia

VirtuosiMedia — Tue, 15 Sep 2009 06:28:01 +0000

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?

By: jonathanstark

jonathanstark — Tue, 15 Sep 2009 05:48:07 +0000

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