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?

Instant Sprite is an in-browser CSS sprite generator I'm working on. It's really fast, but doesn't have quite as many features as some of the others. It currently only works in Firefox or Chrome, since it uses JavaScript FileReader and HTML Canvas to generate the sprites inside the web browser without uploads.

This will do 90% of the work for you: CSS Sprite Generator. 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.

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/

This looks promising :

http://csssprites.org/

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.

Try this:

http://spritepad.wearekiss.com/

ZeroSprites is a CSS sprites generator aimed at area minimization using VLSI floorplaning algorithms.

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

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

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

Just use http://sprites.scherpontwikkeling.nl/ it can generate sprites from website URL's as well...you can integrate your sprites after developing your website. It's very easy to use ;)

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.

Compass CSS Framework has automatic sprite generation.

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.

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.

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

http://github.com/aberant/spittle

There is a new tool out there called ActiveSprites, part of the active_assets gem.

Github: http://bitly.com/eRTwU4

You use a ruby dsl to define your sprites and then do "rake sprites" and the sprites and corresponding stylesheets get generated.

It's rad!

Here's some sample code,

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

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.

I suggest you to use Sprite Master Web. I generates sprite sheets automatically and exports CSS code for you. It always tries to generate smallest sprite sheets with advanced algorithms.

Here is a screenshot and youtube video

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; 
}

If you are using .net, check out http://www.RequestReduce.com. It not only creates the sprite file automatically, but it does it on the fly through an HttpModule along with merging and minifying all CSS. It lso optimizes the sprite image using quantization and lossless compression and it handles the serving of the generated files using ETags and Expires headers to ensure optimal browser caching. The setup is trivial involving just a simple web.config change. See my blog post about its adoption by the Microsoft Visual Studio and MSDN Samples gallery.

i recently find this tools : SpriteRight http://spriterightapp.com/

SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets. Make your sites load faster, cut bandwidth costs and save time. SpriteRight even generates CSS code on the fly.