
Sprite Cow – Generate CSS for sprite sheets - wiradikusuma
http://www.spritecow.com/
======
beernutz
I get very tired of all the complaints about the age of a site or an article
that makes it to the front page.

Please keep in mind, that not everyone starts reading HN when you did. Useful
links remain so, and only take up one line on the list of links. Please don't
detract from others discovering helpful links/articles.

Thanks for posting this wiradikusuma. 8)

~~~
wiradikusuma
Thanks for your kind words. Sometimes I find interesting link and just submit
it to HN, because if it's already submitted, I can read what HNers think about
it, and if it hasn't been submitted (or expired), I can hope HNers to comment
(and I can read what they think about it). It's the discussion that I'm after
:)

------
akvlad
For those of you who want a more developer friendly way of working with
sprites, I would like to introduce you to Compass ([http://compass-
style.org/help/tutorials/spriting/](http://compass-
style.org/help/tutorials/spriting/)) Spriting. Along with using SASS, it will
make creating and maintaining sprites a lot easier.

------
sergiotapia
This is awesome. I can see myself having a sprites.scss file specifically for
these and just copy pasting the rules.

~~~
nathos
If you really want to blow your mind, you should look at the automated
spriting in Compass: [http://compass-
style.org/help/tutorials/spriting/](http://compass-
style.org/help/tutorials/spriting/)

~~~
krallin
Or look at Glue : )

[https://glue.readthedocs.org/en/latest/](https://glue.readthedocs.org/en/latest/)

~~~
bazzargh
There's also [http://csssprites.org/](http://csssprites.org/) (SmartSprites).
The web based tools aren't really in the same category as Compass, Glue and
SmartSprites - they can't be part of an automated build, so _someone_ is going
to have a repetitive manual task to do. Ok for a one-off, but annoying in the
long term.

------
markdown
HN frontpage? This is at least 5yrs old - _that_ guy

~~~
jaffathecake
Well, 2.5 years.

------
LocalPCGuy
I still prefer Texture Packer
([http://www.codeandweb.com/texturepacker](http://www.codeandweb.com/texturepacker))
- it has a free mode, but the best sprites will be made with the paid version.
While it seems to be targeted towards mobile and games, but works very well
for CSS sprites also. Does a nice job generating both the CSS and the Sprite
image. Really simplifies the ability to have multiple developers working on a
single sprite.

------
ShaunB
Been a useful tool for long while now. People looking to create texture
atlases/sprites might find a tool like Texture Packer
([http://www.codeandweb.com/texturepacker](http://www.codeandweb.com/texturepacker))
handy.

Out of interest, does anyone use a web-based sprite/atlas generator
exclusively when working?

------
TallboyOne
[http://pineapple.io/resources/tagged/sprites](http://pineapple.io/resources/tagged/sprites)

------
alixaxel
So cool and useful, I will use this all the time now!

------
jackmoore
I can't wait for the sprite era to end.

~~~
jenius
I haven't used a sprite in quite a while. Gzipped svgs do the job quite well,
are very light, and you don't ever have to worry about resolution. The only
downside is if/when you have to support IE8.

~~~
dictum
Correct me if I'm wrong, but until all widely used modern browsers support
SPDY or HTTP2, the number of requests is still a problem only solvable with
sprites.

~~~
undoware
You stand corrected. You can embed the assets as base64 'data-uri' hrefs.
Which IMO is the correct approach; sprites smack of the sort of suboptimal
overoptimization that complicates workflow and exerts an invisible, mammoth
drag on development, by slightly elongating each code-test-debug cycle. You
have to get your raster assets -- which, let's face it, are probably being
stored in .xcf or .psd format -- into a single .psd (or .xcf; hereinafter
implied) so that a proper .png payload can be generated. Then you have to have
either logic or CSS mess (or yes, SASS, or ...) to unpack that payload. The
whole process is just so obnoxious. Why not just generate base64 strings and
apply them to the site with jade (or grunt + jade, or grunt + ...0. SO MUCH
EASIER. No scripting Photoshop (ew, COM+). No Guile, so you don't have to be
up on your lambdas. Just use the tools you already use.

And, oh, IE8 does data URIs. Why aren't we all doing this again? Oh yeah, I
forgot to write the blog post. :/

------
willmacdonald
Much simpler: [http://spriteme.org/](http://spriteme.org/)

~~~
Timothee
This seems to be the other side of the issue: Sprite Me creates a sprite for
you from different images while Sprite Cow takes an existing sprite and allows
you to get the coordinates and dimensions of any element in that sprite.

Basically the output of the former could be the input of the latter.

------
mkesper
?

~~~
DanielStraight
Creating a single image file with all your images in it and referencing them
in this way lets you use a single HTTP request to load all your images. It's a
way of optimizing sites. This is a tool to make generating the CSS needed for
this pattern easier.

~~~
mkesper
Thanks! I like sites that have a small but helpful "about" section. :)

