

Spritemapper: CSS sprite map generator using simulated annealing - aeontech
http://yostudios.github.com/Spritemapper/

======
arnorhs
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
Another "shitty web interface tool" for sprites:

<http://spriteme.org/>

Runs as a bookmarklet.

~~~
arnorhs
This one I have actually used and is not so "shitty" - but still the same
problem of deployment, but thanks for reminding me :)

------
jacobr
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/>).

------
ch0wn
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
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.

------
netghost
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.

------
ZoFreX
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
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.

~~~
wiradikusuma
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?)

------
joelverhagen
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-...](http://www.joelverhagen.com/blog/2011/03/jim-scotts-packing-
algorithm-in-c-and-sfml/) if you're interested.

------
yesbabyyes
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.

------
skrebbel
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
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.

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

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

------
StavrosK
Fantastic, just what I've been looking for!

------
drivebyacct2
The webfont example is distracting for me.

