Sprite Thing is a tool which automatically generates a sprite image and its associated CSS rules from images you upload.
Sprite Thing positions the images within the sprite file using a smart algorithm which tries to make best use of the space available, and each image is given a 1px padding to avoid rendering issues on certain browsers.
You first need to create an account by entering your email address and inputting a password. Once you access your account, you can start adding images for your sprite.
We set the initial storage limit on the account to 100KB (that's kibibytes, if you were wondering) to help keep our requirements low, if you need more space, get in touch. This 100KB includes the images you upload and the sprite files you create, but you do get leeway on this. If you upload 99KB of images, you'll still be able to create the sprite files.
We recommend you zip up the images you require (you must place the images inside a folder within the zip file), and upload this. From the configuration screen, click to choose your zip file, then click the Upload button.
Sprite Thing will extract the contents of the zip and place the images in your project space. Here's an example of the configuration screen after a few images have been uploaded:
You can now create your first sprite image by clicking the "Create sprite file" in the toolbar above the image list. Once this is complete, your sprite files are listed at the bottom of the page underneath the CSS Sprites heading, like this:
As you can see, this first go has been a pretty good result. The table on the right hand side gives a breakdown of the storage required for the uploaded images and the sprite files. The sprite file image and CSS combined totals around 13.5KB, whereas the original images totalled 46KB - quite a sizeable saving! (And that includes our "made-with" logo, which we'd appreciate if you use on your site, and link to us, to spread the word about Sprite Thing!)
The links in the CSS Sprites table allow you to preview the sprite image and its associated assets in a simple web page, you can also download the sprite image file and obtain the CSS rules.
Rather than show an image of this, the test file is embedded in the following iframe. You can inspect the elements to see how they're put together.
Sprite Thing creates a CSS rule for a class named spr (short for sprite), which sets the background image for use on sprite elements. In addition to this, a rule is set using the file name of each image, setting its background position and dimensions.
If you would like to exclude certain files/folders from the sprite file which is generated, you can use the checkboxes to deselect any images you don't want, before clicking the "Create sprite files" button.
Here is a list of improvements which are in the pipeline for Sprite Thing. Please get in touch if there is anything you would like to see!
:before/:after rules, or applying same image to different class names.