It should be noted that CSS sprites are in general not a new idea. It is a common practice used by most front end developers for the last 4-5 years or so.
However, they are often hand crafted, but there have been in existence many tools that try to do the same thing as "spritemapper" (google results, there may be better ones out there):
> It is a common practice used by most front end developers
I think you are too optimistic there. The practice is not new indeed (the famous http://www.alistapart.com/articles/sprites was published 7 years ago) but so far I don't see many sites using it or any other simple front-end performance improving techniques.
I really love Compass. I'm a django/python guy and it still fits in nicely to my dev flow. You still have to know css to use it, but it removes a lot of the pain of actually writing css.
Looks good! Unfortunately the page doesn't go into much detail - does anyone know if it can handle repeating, or images that have to be at a particular edge of the sprite?
You can't really have a repeating background that is a section of a sprite image in CSS, afaik, so no. That's a limitation of CSS in general, not just this tool.
actually, you can. well, at lest for 1 dimensional repetition. but the sprite image dimension will be limited to either vertically or horizontally. i use this one: http://csssprites.org/ --> "Spriting" x- and y-repeated images: SmartSprites supports turning background images repeated along x and y axes into sprites.
(on a side note, has anyone compared this with SmartSprites?)
You can†, which is precisely why I asked! Several of the better spriting tools can do tiling and edge alignment if you need it (and as a fan of sliding doors, I definitely do).
† You can only do either x-repeating or y-repeating in a given sprite, and everything that needs to repeat must extend from edge to edge
I would not say it's a limitation of CSS per se, more a limitation of what can be done with the spritemap CSS hack, because fundamentally that's what it is: A CSS hack to attempt to reduce page load-times by causing fewer HTTP requests.
I was working on this very same problem a while back. I've never heard of simulated annealing, let alone its application to the 2D bin packing problem.
Seems like a nice tool. Thanks to Stylus, I've been able to migrate to base64 encoded images in the stylesheet instead. Just one download for styles, and I don't have to think about it.
Nice idea. It seems like a workaround for HTTP's one-request-per-file problem, rendering it useless once HTTP gets "fixed". Will this be useful once something like SPDY gets commonplace?
The Google speed team (who I think are behind SPDY) are also looking to build spriting support into their WebP image format. I would presume that a single large image would potentially compress better than multiple small images, particularly if the format is designed for this use case.
Obviously the two improvements aren't necessarily linked, but in the short term they're going to be mostly used together when Google controls both ends of the connection.
In game development this is also used for performance reasons. Although the performance penalty for memory fragmentation on the GPU is of course much smaller than the HTTP issues. But think WEBGL and tools like this will always have some place in some projects.
However, they are often hand crafted, but there have been in existence many tools that try to do the same thing as "spritemapper" (google results, there may be better ones out there):
- http://spritegen.website-performance.org/
- http://csssprites.com/
- http://css-sprit.es/
- http://csssprites.org/
But most of them are shitty web interface tools and not very well suited for a scriptable developer environment.
This is why I like this implementation. It seems nice, I'll probably try it on my next project.