7 ms·

Sprite Cow: Generate CSS for sprite sheets

170 points by llambda 14y ago

positr0n 14y ago
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 14y ago
  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-uploads/ http://www.idownloadblog.com/2012/06/13/ios-6-safari-media-u...
  - ocelotpotpie 14y ago
    For what it's worth, I can confirm the site does indeed load properly in iOS 6.
- MichaelApproved 14y ago
  Exactly. I'm growing from an iPad and got this message: "Sorry, it isn't working out between us It's not you, I just can't get along with your browser. Maybe if things change in the future... maybe if you bring Chrome, Firefox, Opera or even IE10 to the party... not promising anything, but give me a call. pass <canvas> element fail File & FileReader pass addEventListener on elements" However, I still up-voted this article because of all the good suggestions other people added for good sprit generators.
- jaffathecake 14y ago
  Unfortunately Safari is really lagging behind on the FileReader still. But yes, it should still show what the site is about, noted.
- brianfryer 14y ago
  Kinda weird being told I need to switch to Chrome from Chrome (for iOS).
corywatilo 14y ago
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 14y ago
  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
deleted 14y ago
[deleted]
bbx 14y ago
I've successfully used this CSS Sprite Generator quite a few times: http://spritegen.website-performance.org/ 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 14y ago
  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 https://launchpad.net/css-sprite-generator Set the VM's network to a bridged adapter and can easily access it from my browser.
domwood 14y ago
This has been around for quite a while, I distinctly remember it doing the rounds on Twitter. Still nice, though.
- xyzzyb 14y ago
  Yeah, I saved it to pinboard back in December. Very handy.
patrickod 14y ago
I found this tool using Google about 3 weeks ago and it made my life so much easier while using sprite sheets. Great tool
sams99 14y ago
A related tool not to be forgotten is http://spriteme.org/ http://spriteme.org/
ericlevine 14y ago
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/ 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.
sgdesign 14y ago
A quick plug: you can find a lot of similarly useful tools (including SpriteCow) on The Toolbox: http://www.thetoolbox.cc/ http://www.thetoolbox.cc/
- notJim 14y ago
  This looks very handy, thanks!
stevencorona 14y ago
their example/demo is fabulous, i wish more open source/tools libraries had ones that functioned half as well
nachteilig 14y ago
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 14y ago
  Unfortunately Safari doesn't support the FileReader APIs required to get image data out of the file. http://caniuse.com/#feat=filereader http://caniuse.com/#feat=filereader - as you can see Safari is lagging behind here
gootik 14y ago
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]
tomjen3 14y ago
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 http://opensource.cego.dk/spritemapper).
bnorton 14y ago
multiple file uploads. :)
jacobr 14y ago
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/nzakas/cssembed https://github.com/cloudhead/less.js/wiki/Include-Data-URI-Base64-encoded-images-easily https://github.com/cloudhead/less.js/wiki/Include-Data-URI-B... http://compass-style.org/reference/compass/helpers/inline-data/ http://compass-style.org/reference/compass/helpers/inline-da...
- jaffathecake 14y ago
  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 14y ago
    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.
ommunist 14y ago
This is a good one. Also kudos to @jacobr, for his collection.
esbwhat 14y ago
this seems to temporarily take out my firefox for a minute or so. Not immediately, just after using it a bit.
salmanapk 14y ago
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/ 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
Produce 14y ago
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 14y ago
  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/assets/8/script/SpriteCanvas.js#L57 https://github.com/jakearchibald/sprite-cow/blob/master/www/... then an expansion https://github.com/jakearchibald/sprite-cow/blob/master/www/assets/8/script/SpriteCanvas.js#L88 https://github.com/jakearchibald/sprite-cow/blob/master/www/...
  - Produce 14y ago
    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.
  - wamatt 14y ago
    Also having big performance issues. Macbook Pro (2012), 16GB Ram, Chrome v20
- moron 14y ago
  Christ, you act like you're doing someone a favor running this tool that was built to help you save time. Let me guess, you're the guy who bitches when the WiFi is down on the airplane.
  - Produce 14y ago
    >Christ, you act like you're doing someone a favor running this tool that was built to help you save time. CPU time is super expensive where I live. >Let me guess, you're the guy who bitches when the WiFi is down on the airplane. Incessantly.
moron 14y ago
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.
digitalclubb 14y ago
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/ http://instantsprite.com/

170 points by llambda 14y ago

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 14y ago
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-uploads/ http://www.idownloadblog.com/2012/06/13/ios-6-safari-media-u...
- ocelotpotpie 14y ago
  For what it's worth, I can confirm the site does indeed load properly in iOS 6.
MichaelApproved 14y ago
Exactly. I'm growing from an iPad and got this message: "Sorry, it isn't working out between us It's not you, I just can't get along with your browser. Maybe if things change in the future... maybe if you bring Chrome, Firefox, Opera or even IE10 to the party... not promising anything, but give me a call. pass <canvas> element fail File & FileReader pass addEventListener on elements" However, I still up-voted this article because of all the good suggestions other people added for good sprit generators.
jaffathecake 14y ago
Unfortunately Safari is really lagging behind on the FileReader still. But yes, it should still show what the site is about, noted.
brianfryer 14y ago
Kinda weird being told I need to switch to Chrome from Chrome (for iOS).

corywatilo 14y ago

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 14y ago
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

deleted 14y ago

[deleted]

bbx 14y ago

I've successfully used this CSS Sprite Generator quite a few times: http://spritegen.website-performance.org/ 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 14y ago
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 https://launchpad.net/css-sprite-generator Set the VM's network to a bridged adapter and can easily access it from my browser.

domwood 14y ago

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

xyzzyb 14y ago
Yeah, I saved it to pinboard back in December. Very handy.

patrickod 14y ago

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

sams99 14y ago

A related tool not to be forgotten is http://spriteme.org/ http://spriteme.org/

ericlevine 14y ago

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

sgdesign 14y ago

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

notJim 14y ago
This looks very handy, thanks!

stevencorona 14y ago

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

nachteilig 14y ago

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 14y ago
Unfortunately Safari doesn't support the FileReader APIs required to get image data out of the file. http://caniuse.com/#feat=filereader http://caniuse.com/#feat=filereader - as you can see Safari is lagging behind here

gootik 14y ago

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]

tomjen3 14y ago

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 http://opensource.cego.dk/spritemapper).

bnorton 14y ago

multiple file uploads. :)

jacobr 14y ago

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/nzakas/cssembed https://github.com/cloudhead/less.js/wiki/Include-Data-URI-Base64-encoded-images-easily https://github.com/cloudhead/less.js/wiki/Include-Data-URI-B... http://compass-style.org/reference/compass/helpers/inline-data/ http://compass-style.org/reference/compass/helpers/inline-da...

jaffathecake 14y ago
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 14y ago
  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.

ommunist 14y ago

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

esbwhat 14y ago

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

salmanapk 14y ago

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/ 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

Produce 14y ago

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 14y ago
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/assets/8/script/SpriteCanvas.js#L57 https://github.com/jakearchibald/sprite-cow/blob/master/www/... then an expansion https://github.com/jakearchibald/sprite-cow/blob/master/www/assets/8/script/SpriteCanvas.js#L88 https://github.com/jakearchibald/sprite-cow/blob/master/www/...
- Produce 14y ago
  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.
- wamatt 14y ago
  Also having big performance issues. Macbook Pro (2012), 16GB Ram, Chrome v20
moron 14y ago
Christ, you act like you're doing someone a favor running this tool that was built to help you save time. Let me guess, you're the guy who bitches when the WiFi is down on the airplane.
- Produce 14y ago
  >Christ, you act like you're doing someone a favor running this tool that was built to help you save time. CPU time is super expensive where I live. >Let me guess, you're the guy who bitches when the WiFi is down on the airplane. Incessantly.

moron 14y ago

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.

digitalclubb 14y ago

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/ http://instantsprite.com/