Tools to make CSS sprites?

views:

1598

answers:

+20 Q:

Tools to make CSS sprites?

Are there any good tools to make css sprites?

IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images.

At the least I'd want it to take a directory of images and generate a big sprite and the .css necessary to use each as a background.

Are there any good photoshop plugins or fully blown apps to do this?

+3 A:

found this one pretty fast tho that 500K upload limit might be a pain. source code is available here

Scott Evernden 2009-02-09 07:28:23

why would 500kb upload be a pain? i'd probably never want to upload > 100kb

Simon_Weaver 2009-02-09 09:06:49

I said it 'might' be a pain. It sorta depends on the application no ? .. A zip file full of medium size PNGs, for example, on a sizable grid ~ ~could~ run close to this number. if its all little bitmaps then sure/ no prob.

Scott Evernden 2009-02-09 14:41:11

ya but the whole point of css sprites is to prevent lots of little images being loaded with many requests. if you really did have that many little sprites it would take a long time to load in which time none would be displayed. best to keep them i'd think at most 100kb. you can always do several

Simon_Weaver 2009-02-10 00:14:45

i do a lot of work with images. maybe not little css bitmaps. so maybe that's why i gave the caveat. your needs are different/ ok. 500kb will arrive in a second on most broadbands. i was first to supply the accepted answer to your query and here i am down~voted and defending my language? whatever...

Scott Evernden 2009-02-10 05:13:43

+7 A:

This will do 90% of the work for you: http://spritegen.website-performance.org/. You'll still need to edit the rules yourself, but the tool will give you the code fragments you need for the new CSS file.

Ben Alpert 2009-02-09 07:29:22

@ben perfect! assuming it works ;-)

Simon_Weaver 2009-02-09 09:05:44

i'm a little dissatisfied with this tool so i unchose it as my selected answer. it ended up cropping my image and it doesnt explain very well why it leaves big gaps between images

Simon_Weaver 2009-02-12 07:43:05

I don't like this solution, although I guess it works ok. SpriteMe seems to work much better.

Django Reinhardt 2010-10-15 11:34:40

+1 A:

If you like Java, then you can use GWT 1.5+ which comes with something called "ImageBundle." The GWT compiler will handle all the nasty details for you. You won't even have to code a single line of JavaScript or write any CSS.

Aaron Digulla 2009-02-09 14:17:27

+1 A:

Not a direct answer but to my fellow developers and web integrators, consider simply aligning each sprite to powers of two; eg a 16 pixel or 32 pixel grid. It makes calculating offsets in the CSS file much easier. All the white space between does not matter as the gifd and png formats compress that very well.

faB 2009-02-12 23:57:53

good tip, although i'm mainly trying to combine text headers (1-2kb each) into a single file. i'm not worried too much about white space because i know it'll get compressed out - i just dont completely understand why tools to make sprites make so much of it

Simon_Weaver 2009-02-13 00:46:18

One caveat to this - while the whitespace in the image will be compressed for transport, it is expanded and occupies memory when loaded the browser. Blind use of automatic sprite generation tools can lead to some huge images, which can spike memory use on those pages. Some care is needed in grouping images to form sprite sheets to keep this within reasonable bounds.

Sam Foster 2010-06-21 10:38:22

Sam: True! Found this out later. If the sprite image is very wide or tall that's something to consider! Especially for mobile phone apps (less memory).Simon: the white space is probably because of limitations of CSS. Even when you use no-repeat on a background, the sprite image will show through padding, line-height and basically all the element's background area except margins and borders. Say for example you have an icon for a link. If the link would span mutliple lines then other icons of the sprite might show through. Adding enough whitespace makes this more "resilient".

faB 2010-07-11 21:56:34

+3 A:

This looks promising :

http://smartsprites.osinski.name/

Also i found this article which has some useful information, and even some reader comments worth reading.

Also apparently google web toolkit has something - so if you're using that it might be worth checking out.

Simon_Weaver 2009-02-15 20:27:44

+1 A:

Here is a script that combines images via a Photoshop script into CSS sprites. It won't do a sprite map as you asked, but it will combine images in multiples of two (2, 4, 8) if they are the same size. I prefer combining similar images (normal, hover, selected, parent of selected) than having all the images in one file.

Stephen James 2009-07-07 19:23:37

+5 A:

There is now Sprite Me by Steve Souders. Just tries it out and it seems to work pretty well.

Here is the link http://spriteme.org/ and here is the blog post announcing it.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Jauder Ho 2009-10-21 10:59:35

+1 This is amazingly easy to use: Just navigate to the page you want and click the SpriteMe bookmarklet... It creates the images and CSS automatically!

Django Reinhardt 2010-10-15 11:35:29

+1 A:

if you are using ruby on rails, there is an easy to install library to generate css sprites.

http://github.com/aberant/spittle

aberant 2009-11-30 04:02:47

+1 A:

Tonttu is Adobe AIR based application which provides easy interface for creating powerful CSS Sprites images. You can specify FiledWidth and FieldHeight or sort images.
Create CSS Sprites Images with Tonttu Desktop Tool

dushouke 2010-05-25 02:24:05

ansaurus

tags:

views:

answers:

Tools to make CSS sprites?

related questions