Tools to make CSS sprites? [closed]

Question

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?

Answer 1

Compass CSS Framework has automatic sprite generation.

Answer 2

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

Answer 3

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.

Answer 4

None of these tools met my requirements, so I wrote one that uses Mark Tylers's tiny image library, mtpixel (now part of mtcelledit) It isn't super extensive but it is easily extensible through mtpixel's built in functions that include: grayscale, color inversion, rotation, sharpen, quantize, posterize, flip (vertical and horizontal), transform, rgb->indexed, indexed->rgb, edge detect, emboss, drawing polygons, text and more.

All you do is pass it a set of images as args (supports png, gif and jpeg) and it will output an rgb png called sprite.png along with the useful image slicing data to stdout. I use it in bash scripts to spritify an entire directory of images and output the slicing data for automatic generation of css (with the hope of eventually making it capable of replacing existing img tags automagically with a bit of creative sed/awk)

Binary packages for puppy linux will be here:

http://murga-linux.com/puppy/viewtopic.php?t=82009

My use case only required splicing the images vertically into a new png, so that is all it does, but my source code is public domain and the mtcelledit library is gpl3. With mtpixel statically linked, the binary is <100kb (only a few kb when dynamically linked) and the only other dependencies are libpng, libjpeg and libgif (and freetype with the official mtpixel, but I didn't need the text support, so I commented out the freetype bits in the static build)

feel free to modify for your own needs:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

Answer 5

Not clear yet if it'll make it into the core ASP.NET framework but here's a Microsoft codeplex project for csssprites :

http://aspnet.codeplex.com/releases/view/50869

if you like it - use it - or just like the idea then add a comment. I think this would be a great thing to have in the ASP.NET framework. Have not personally used it (I had to invent the wheel myself) but its got good reviews.

---

It includes the following components:

• API for automatically generating sprites and inline images
• Controls and helpers which provide a convenient way of calling into the API

Features Added in Second Release:

• A CSS linking control for Web Forms (selects the proper CSS file for the user's browser, but does not display an image)
• Using custom folder paths other than App_Sprites
• Changing the tiling direction of sprite images
• Merging the generated CSS with a user's own CSS

Features under consideration for future releases:

• Automatically selecting the most efficient sprite background colour
• Automatically minifying the rendered CSS
• Compiling against .NET 3.5

Answer 6

https://github.com/northpoint/SpeedySprite

This tool takes a novel approach in that it assembles your requested images on the fly as an http service. This makes the whole process pretty simple (no preprocessing required, change images any time): You start the service and then reference whatever images you want in your HTML:

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Because it's dynamic, you can even make sprites from a dynamic set of images such as a thumbnail page. Doesn't support JPEG though, but PNG and GIF works fine.