Spritemapper: CSS sprite map generator using simulated annealing

http://yostudios.github.com/Spritemapper/

by aeontech • 15 years ago

104 22 15 years ago

yostudios.github.com

skrebbel• 15 years 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• 15 years 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• 15 years 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.

arnorhs2• 15 years 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://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.

gokhan• 15 years ago

Another "shitty web interface tool" for sprites:

http://spriteme.org/

Runs as a bookmarklet.

arnorhs2• 15 years 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• 15 years 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 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.

ZoFreX2• 15 years 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• 15 years 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• 15 years 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• 15 years 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/ --> "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?)

ZoFreX2• 15 years 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• 15 years ago

Fantastic, just what I've been looking for!

maverhick• 15 years ago

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

antimatter15• 15 years ago

I don't think that would be a great idea.

yesbabyyes• 15 years 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• 15 years 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/

2mur• 15 years 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• 15 years 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.joelverhagen.com/blog/2011/03/jim-scotts-packing-... if you're interested.

netghost• 15 years ago

Hey my co-worker just built a similar tool for creating sprites: 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• 15 years 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/).

drivebyacct2• 15 years ago

The webfont example is distracting for me.

Spritemapper: CSS sprite map generator using simulated annealing

Related Stories