CSS Sprite Generator

CSS Sprite Generator is a helpful application for users looking to create one CSS Sprite image from multiple source images. CSS sprites are a method used to reduce the number of HTTP requests made for image resources referenced by your site. This is done by combining images into one larger image at defined X and Y coordinates. The resulting image is then assigned to relevant page elements and the background-position CSS property can be used to shift the visible area to the desired component image.

This technique is particularly useful for improving site performance, especially in cases where many small images, such as menu icons, are used. The Yahoo! home page is a great example of a site that employs this technique for this exact purpose.

To use this application, users must have Apache and Mod Rewrite (optional), PHP >= 5.2 (with Imagick or GD 2), Image Magick binary (optional), Command line ZIP binary, and OptiPNG (optional).

Setting up the application involves copying the "spritegen" directory to your server and setting up a new Apache virtual host with the document root pointing to "htdocs" (for optimal security, other files should not be accessible through the web server). Optionally, users can add mod rewrite rules to the Apache virtual host config and configure GZIP CSS & JS for improved performance and far futures expires headers for CSS, JS & images (see "setup/gzip-expires.txt" for rules to add to your Apache virtual host config).

Apache must be able to write to the sub-folders of "cache" (run chmod +w cache/{source-images|sprites|translations}), and users must copy "includes/conf/example.inc.php" to "includes/conf/live.inc.php" and configure settings to suit their server environment. Finally, users must modify "templates/sidebar.php" (which is empty by default) and load it in their browser to enjoy the application.