
Sprite Cow: Generate CSS for sprite sheets - llambda
http://spritecow.com/
======
jacobr
If you no longer support IE7, I think it's time to switch to data uris inlined
in your stylesheets. It's easier to maintain, you don't have to care about
image sizes, offsets and other annoyances with sprites, and it's trivial to
implement as a part of your build process.

There are a bunch of tools available:

<https://github.com/nzakas/cssembed>

[https://github.com/cloudhead/less.js/wiki/Include-Data-
URI-B...](https://github.com/cloudhead/less.js/wiki/Include-Data-URI-
Base64-encoded-images-easily)

[http://compass-style.org/reference/compass/helpers/inline-
da...](http://compass-style.org/reference/compass/helpers/inline-data/)

~~~
jaffathecake
Sprites often perform better than data uris.

With data uris, you're putting the image data in your css file. This creates
two performance differences to images.

Firstly, the user will download the image data even if it isn't used on the
page, an external image is only downloaded if it's element is present &
visible.

Secondly & more importantly, browsers completely block rendering while CSS
downloads (with the exception of Opera, which unblocks after about 3 seconds),
CSS does not render progressively. A 10k CSS file with 60k of imagery will
load slower than a 70k CSS file due to HTTP overhead, although it'll be
perceived faster as the user sees things happening after 10k rather than
looking at a blank screen until the full 70k has downloaded. Small numbers,
but noticeable on flakey wi-fi and mobile connections.

In terms of image size, when you base64 encode an image you're using 8 bits of
data to represent 6. Gzip deals with a lot of this, but it's still an extra
~10% per image. That's compared to separate images, with a sprite image you
get further benefits by sharing a PNG palette and compression across all
sprites.

Neither sprites or data uris are the "correct solution" in all situations, it
should be considered on a case by case basis. Sprite Cow itself uses both
techniques, the toolbar icons are in a sprite, some smaller tiling assets are
data uris.

~~~
giulianob
Also I'd imagine the client may download the image multiple times if it's used
in multiple CSS rules. Caching can probably also be hindered since mobile
devices have limits on the size of JS/CSS they will cache and stuffing images
in CSS can create large files.

~~~
bryne
Gzip will take care of the duplication bloat issue.

In general, this is a process best curated manually, with a maximum on
converted file sizes and hand-picking images that are "must-haves" for the
initial page load.

------
positr0n
Some feedback: I get a message telling me to change my browser on iOS. You
should display your normal front page with whatever value proposition,
features, etc you have there so I can at least learn if I want to use your
site whenever I do work on a normal PC.

~~~
Samuel_Michon
I agree, that's good advice for platforms/devices that won't be able to run
the app. For iOS the author doesn't have to do anything but wait.

The app gave you that message because Mobile Safari doesn't have a file
picker. That'll change in iOS 6, which will be released within the next few
months.

[http://www.idownloadblog.com/2012/06/13/ios-6-safari-
media-u...](http://www.idownloadblog.com/2012/06/13/ios-6-safari-media-
uploads/)

~~~
ocelotpotpie
For what it's worth, I can confirm the site does indeed load properly in iOS
6.

------
bbx
I've successfully used this CSS Sprite Generator quite a few times:
<http://spritegen.website-performance.org/>

For example, I had to generate a 100+ icons sprite (24x24px, 48x48px and
96x96px). All I had to do was:

1\. Zip these icons

2\. Upload the file

3\. Define the offset (in this case 2px in order to have round numbers)

4\. Choose a CSS Class prefix (using the icon size is quite handy)

~~~
sandycheeks
I used it so much, I took an Ubuntu VM in VirtualBox, added LAMP and installed
it so it can be used for larger sets. <https://launchpad.net/css-sprite-
generator>

Set the VM's network to a bridged adapter and can easily access it from my
browser.

------
corywatilo
As much as I'm using Compass to auto-generate sprites these days, this will
definitely come in handy at random times in the future. Calculating
coordinates and dimensions is such tedious work, I can't believe nobody came
up with something like this 5 years ago! Great idea.

~~~
mithras
I agree, I'm a bit flabbergasted this didn't exist yet. I guess at least one
person made it before but didn't get any traction

------
tomjen3
If you want a spritesheet generator that works ofline, the company I work for
has open sourced a crazy fancy one, which is able to do things like take an
entire directory and recursivly convert it into a single image with as little
space lost as possible.

I don't remember if It comes with css output, but if not it should be really
easy to plug it in as it was designed for that. It does come with an ant
target. (<http://opensource.cego.dk/spritemapper>).

------
sgdesign
A quick plug: you can find a lot of similarly useful tools (including
SpriteCow) on The Toolbox: <http://www.thetoolbox.cc/>

~~~
notJim
This looks very handy, thanks!

------
ericlevine
While we're on the subject of sprite tools, I threw this together recently for
trying out the drag-n-drop and file APIs: <http://spreet.ejlevine.com/>

The primary benefit of this tool is that it automatically lays out your images
for you and, since it's all client side, doesn't require you to share your
images with an untrusted sprite generator.

------
digitalclubb
This is a fantastic site and I used to use it a lot, the problem I find though
is creating the initial sprite to use.

I found the following site a lot easier if you just export all the individual
icons in bulk, it then auto generates the sprite and the positions needed for
your CSS:

<http://instantsprite.com/>

------
sams99
A related tool not to be forgotten is <http://spriteme.org/>

------
nachteilig
I'm a little surprised that this doesn't work for Safari on a Mac, and that it
gave me a splash screen telling me as much instead of even giving me a "well,
it's your ass..." notice. Especially considering that Chrome apparently works.

~~~
jaffathecake
Unfortunately Safari doesn't support the FileReader APIs required to get image
data out of the file. <http://caniuse.com/#feat=filereader> \- as you can see
Safari is lagging behind here

------
gootik
Great app, I'm sure I'll be using it. However, when I clicked on Pick
Background and selected a transparent area Firefox crashed! (using the example
image)

[Firefox 14.0.1 - Windows 7]

------
patrickod
I found this tool using Google about 3 weeks ago and it made my life so much
easier while using sprite sheets. Great tool

------
domwood
This has been around for quite a while, I distinctly remember it doing the
rounds on Twitter. Still nice, though.

~~~
xyzzyb
Yeah, I saved it to pinboard back in December. Very handy.

------
Produce
Congratulations, you have managed to provide a two second delay between
clicking on, for example, the Firefox icon and the resulting sprite CSS being
displayed on a brand spanking new eight core, 8GiB RAM system. I hope you're
proud of your abuse of my computer's resources. But, alas, I shall be having
no more of this nonesense!

~~~
jaffathecake
What's your browser & OS? RAM isn't the bottleneck here, it'll be the CPU via
a poor JavaScript engine.

Of course, it's open source, any optimisation suggestions will be gratefully
received. The calculation of sprite boundaries happens in two steps, first a
contraction [https://github.com/jakearchibald/sprite-
cow/blob/master/www/...](https://github.com/jakearchibald/sprite-
cow/blob/master/www/assets/8/script/SpriteCanvas.js#L57) then an expansion
[https://github.com/jakearchibald/sprite-
cow/blob/master/www/...](https://github.com/jakearchibald/sprite-
cow/blob/master/www/assets/8/script/SpriteCanvas.js#L88)

~~~
Produce
Firefox 14.0.1, Arch Linux (it's a rolling release distro, fully up to date).

Solving these kinds of problems and optimizing things makes me happy. I'll
take a look at this when I get home from work and see if I can speed it up.

------
ommunist
This is a good one. Also kudos to @jacobr, for his collection.

------
esbwhat
this seems to temporarily take out my firefox for a minute or so. Not
immediately, just after using it a bit.

------
stevencorona
their example/demo is fabulous, i wish more open source/tools libraries had
ones that functioned half as well

------
bnorton
multiple file uploads. :)

------
salmanapk
Nice tool, thanks for sharing.

We will no longer have to deal with all this BS once browsers implement CSS3
image values. (<http://www.w3.org/TR/css3-images/>) Syntax would be like:
`background-image: image('sprites.png#xywh=40,0,20,20');` Share single image
across your site/stylesheets. No need to set a fixed width/height. No
background-repeat restrictions etc

------
moron
This is great, I spent hours dicking around with CSS sprites for back/forward
arrows last week. It was a pretty frustrating waste of time. Every time I
wanted the element to be wider I had to go back and redo the sprites. I guess
I'd still have to do that here, but it takes away a lot of the pain.

