CSS Sprite Generator is an application that allows a user to create one CSS Sprite images from multiple source images.

What are CSS Sprites?

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.

Requirements:

· Apache
· Mod Rewrite (optional)
· PHP >= 5.2 (with Imagick or GD 2)
· Image Magick binary (optional)
· Command line ZIP binary
· OptiPNG (optional)

Set Up

1. Copy "spritegen" directory to your server.
2. Set up new Apache virtual host and configure document root to point to "htdocs" (preferably other files should not be accessible via the web server).
3. Optionally add mod rewrite rules to Apache virtual host config (see "setup/mod-rewrite-rules.txt" for rules).
4. Additionally you may want to GZIP CSS & JS for improved performance and set far futures expires headers for CSS, JS & images (see "setup/gzip-expires.txt" for rules to add to your Apache virtual host config).
5. Ensure Apache can write to the sub-folders of "cache" (run chmod +w cache/{source-images|sprites|translations}).
6. Copy "includes/conf/example.inc.php" to "includes/conf/live.inc.php" and configure settings according to your server environment.
7. Modify "templates/sidebar.php". It's empty by default.
8. Load in browser and enjoy!