8 ms·

Spritemapper: CSS sprite map generator using simulated annealing

104 points by aeontech 15y ago

skrebbel 15y ago
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?
- ZeroGravitas 15y ago
  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.
- nasmorn 15y ago
  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.
arnorhs 15y ago
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): - http://spritegen.website-performance.org/ http://spritegen.website-performance.org/ - http://csssprites.com/ http://csssprites.com/ - http://css-sprit.es/ http://css-sprit.es/ - http://csssprites.org/ 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.
- gokhan 15y ago
  Another "shitty web interface tool" for sprites: http://spriteme.org/ http://spriteme.org/ Runs as a bookmarklet.
  - arnorhs 15y ago
    This one I have actually used and is not so "shitty" - but still the same problem of deployment, but thanks for reminding me :)
- rimantas 15y ago
  > 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 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.
ZoFreX 15y ago
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?
- aeontech 15y ago
  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.
  - trezor 15y ago
    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.
  - wiradikusuma 15y ago
    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/ 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?)
  - ZoFreX 15y ago
    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
StavrosK 15y ago
Fantastic, just what I've been looking for!
maverhick 15y ago
Animated gifs still cannot be sprited? i.e smilies for ex, cannot be sprited?
- antimatter15 15y ago
  I don't think that would be a great idea.
yesbabyyes 15y ago
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.
ch0wn 15y ago
For those of you using Sass: The latest version of Compass got built-in support for sprite generation. http://compass-style.org/help/tutorials/spriting/ http://compass-style.org/help/tutorials/spriting/
- 2mur 15y ago
  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.
joelverhagen 15y ago
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. Here's my implementation of Jim Scott's lightmap packing algorithm (http://www.blackpawn.com/texts/lightmaps/default.html http://www.blackpawn.com/texts/lightmaps/default.html): http://www.joelverhagen.com/blog/2011/03/jim-scotts-packing-algorithm-in-c-and-sfml/ http://www.joelverhagen.com/blog/2011/03/jim-scotts-packing-... if you're interested.
deleted 15y ago
[deleted]
netghost 15y ago
Hey my co-worker just built a similar tool for creating sprites: https://github.com/jakesgordon/sprite-factory https://github.com/jakesgordon/sprite-factory It doesn't use simulated annealing, which is pretty neat, but it does generate really well packed pngs: sf --layout packed --pngcrush awesome/ Leads to 87x80 at 6,873 bytes vs 103x92 at 7,237 bytes on the awesome image font demo. It will also output either sass or css.
jacobr 15y ago
The resulting CSS is really inefficient. 1. It should only write the URL of the background image once, and only background-position on the rest. 2. The most widely used width/height should be specified as the default and width/height properties only included when it differs. Also, to avoid the need of any padding between the images you can emulate background-crop with pseudo elements (http://nicolasgallagher.com/css-background-image-hacks/ http://nicolasgallagher.com/css-background-image-hacks/).
drivebyacct2 15y ago
The webfont example is distracting for me.

104 points by aeontech 15y ago

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?

ZeroGravitas 15y ago
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.
nasmorn 15y ago
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.

arnorhs 15y ago

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): - http://spritegen.website-performance.org/ http://spritegen.website-performance.org/ - http://csssprites.com/ http://csssprites.com/ - http://css-sprit.es/ http://css-sprit.es/ - http://csssprites.org/ 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.

gokhan 15y ago
Another "shitty web interface tool" for sprites: http://spriteme.org/ http://spriteme.org/ Runs as a bookmarklet.
- arnorhs 15y ago
  This one I have actually used and is not so "shitty" - but still the same problem of deployment, but thanks for reminding me :)
rimantas 15y ago
> 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 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.

ZoFreX 15y ago

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?

aeontech 15y ago
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.
- trezor 15y ago
  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.
- wiradikusuma 15y ago
  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/ 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?)
- ZoFreX 15y ago
  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

StavrosK 15y ago

Fantastic, just what I've been looking for!

maverhick 15y ago

Animated gifs still cannot be sprited? i.e smilies for ex, cannot be sprited?

antimatter15 15y ago
I don't think that would be a great idea.

yesbabyyes 15y ago

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.

ch0wn 15y ago

For those of you using Sass: The latest version of Compass got built-in support for sprite generation. http://compass-style.org/help/tutorials/spriting/ http://compass-style.org/help/tutorials/spriting/

2mur 15y ago
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.

joelverhagen 15y ago

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. Here's my implementation of Jim Scott's lightmap packing algorithm (http://www.blackpawn.com/texts/lightmaps/default.html http://www.blackpawn.com/texts/lightmaps/default.html): http://www.joelverhagen.com/blog/2011/03/jim-scotts-packing-algorithm-in-c-and-sfml/ http://www.joelverhagen.com/blog/2011/03/jim-scotts-packing-... if you're interested.

deleted 15y ago

[deleted]

netghost 15y ago

Hey my co-worker just built a similar tool for creating sprites: https://github.com/jakesgordon/sprite-factory https://github.com/jakesgordon/sprite-factory It doesn't use simulated annealing, which is pretty neat, but it does generate really well packed pngs: sf --layout packed --pngcrush awesome/ Leads to 87x80 at 6,873 bytes vs 103x92 at 7,237 bytes on the awesome image font demo. It will also output either sass or css.

jacobr 15y ago

The resulting CSS is really inefficient. 1. It should only write the URL of the background image once, and only background-position on the rest. 2. The most widely used width/height should be specified as the default and width/height properties only included when it differs. Also, to avoid the need of any padding between the images you can emulate background-crop with pseudo elements (http://nicolasgallagher.com/css-background-image-hacks/ http://nicolasgallagher.com/css-background-image-hacks/).

drivebyacct2 15y ago

The webfont example is distracting for me.