This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.
The tool has a number of options you can configure to modify characteristics of the generated sprite image and CSS to better match the specifics of your site set up. These options are detailed below:
Resize Source Images
- Width & Height
- If either width or height are set to less than 100% source images will be reduced in size before being copied into the output image. The tool won't let you specify a value greater than 100% as increasing images in size results in a reduction of image quality. The default for both width and height is 100% (no resizing).
- Ignore duplicate images
- Duplicate images are copied into the output image and separate CSS rules are created for each duplicate.
- Remove duplicate images but merge classes
- The tool compares an MD5 of the contents of each image to accurately determine those which are exact duplicates of others contained within the ZIP. These duplicates are discarded and CSS rules for these duplicates are combined into one rule.
Sprite Output Options
- Horizontal Offset
- This determines the horizontal spacing between rows of images in the output. This value needs to be large enough to take account of the Safari background repeat bug. We suggest sticking with the default.
- Vertical Offset
- This determines the vertical spacing between each consecutive image. This should be large enough to take account of user font size increases. Generally we'd recommend that you design your site so that visitors can increase their font size twice before the next background image in the sequence becomes visible.
- Wrap columns to fix Opera bug
- Opera 9.0 and below have a bug which affects CSS background offsets less than -2042px. All values less than this are treated as -2042px exactly. With this option is selected CSS Sprite Generator creates a new column each time the vertical offset reaches -2000px.
- Background Colour
- Sets a background colour for the output image. This field takes a 6 digit hex colour value. If left blank and the output format is set to either GIF or PNG then background will be transparent.
- Output Format
- Supports GIF, PNG and JPG. GIF and PNG can have transparent backgrounds. The default is PNG.
- Number of Colours
- Restrict the number of colours used in the output file to reduce overall file size. This setting applies to PNGs and GIFs.
- Image Quality
- Specify the output image quality as a percentage. This setting only applies to JPEGs.
- Compress Image with OptiPNG
- When checked the output file is processed with OptiPNG to further reduce its size. Often this will half the size of the file. This setting only applies to PNGs.
CSS Output Options
- CSS Prefix
- Each CSS position rule generated is prefixed with the text entered. Prepending of basic id and class selectors is supportted. The following characters are allowed - a-z, 0-9, _, -, # and .
- Filename Pattern Match
- Any valid regular expression can be used. Wrap rounded brackets around the section of the match you'd like to be extracted from the filename of each image. These will be used as the basis of the positioning class names.
- Class Prefix
- The text entered will be prepended before each generated class name. It is particularly important to specify this where the generated class names may otherwise start with a number as this would result in an invalid selector (as defined by W3C recommendations). The following characters are allowed - a-z, 0-9, _ and -. The prefix entered cannot start with a number.
- CSS Suffix
- The text entered will be added to the end of each CSS rule. "CSS Suffix" allows the same characters as "Class Prefix".