Auto Spriting?

Anyone know of any tools to generate css sprites automagically with very less input from the developers?

Currently I am playing with SmartSprites, but would like to know better alternatives. This tool kinda makes things look different and need to hack a lot to make everything look fine… not a nice approach.

I am building a set of tools which can be integrated into the build/deploy procedure of the project, so the developers play with the raw unoptimized code, but the deployed version makes the sprites, bundles javascripts, do some preloading, etc.

Looking for some pointers for spriting… Are there any other tools i should look at? The project is in python, but we can use any tool which runs on linux command line.

We were looking at using data URI (+ MTHML) , but decided against it since it made the CSS files really bloated.

http://spriteme.org does a pretty good job and even gives you the changes to make to your css. It uses firebug lite to show you what the page looks like with the new sprite and css changes. Make sure you do the demo: http://spriteme.org/demo.php to get a full understanding of how it works.

Thanks for the tip. i did look into spriteme.org and have it “installed” on my browser. It is good for figuring out what are the spritable components, but it is still done “by hand” …

I was looking for something that can be built into the deploy process… runs on command line… and run unattended… SmartSprites does just that, but not very well…

Hey Sajal - One of Steve’s ideas with SpriteMe was to allow designers to A/B the page with and without the sprites inserted, so they could visually confirm that nothing was broken in the process. Might be something to think about (on the other hand, maybe not :slight_smile:

Similarly, SpriteMe also optimizes the sprite, but it’s totally non-destructive compression, in the spirit of leaving the underlying page unchanged, but faster.

What did you wind up doing? - Jared Hirsch

Nothing…
I left the sprite issue as it is (for now) and moved on to other tasks.

The current CSS is HUGE! > 120 KB uncompressed… and a complete css + redesign is planned… so i figured to not bother with spriting until redesign is in process/completed.

the site our team is working on is not live… so there isint any immediate sprite-or-your-site-will-die situation…

Will post back if i settle on something. maybe will force the designers to start with sprites themselves from the start!

That’s cool. If you’re starting from scratch, and targeting modern browsers, encoding small images as dataURIs inside the CSS is a lot less work, and a lot less maintenance, than sprites. See hixie’s data:URI kitchen to play around with it.

you can even use data uri with older browsers + IE using the MHTML method.

Im using it for my blog

but the downside to this is it makes your CSS file big… so rendering will start later… You may be able to improve the total page load time… but you would be delaying start of rendering and make user stare at blank screen for longer… decide whats important to you.

Thanks for sharing that site.
Will have a look at it right away.
Hope to find something better.

There are several “auto-spriting” components. You will need to narrow it down to a specific programming language / runtime to make a final decision.

.NET has “Sprite and Image Optimization Framework Preview 2”. Ruby has “Lemonade”. There are quite many other ones.

Unfortunately often there seems to be no clear ‘winner’ in terms of dev community size. Many of these seem to be one-man shows, with a good deal of uncertainty about their future release stability etc.