CSS Sprite Generator 4.0

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

  Add it to your Download Basket!

 Add it to your Watch List!

0/5

Rate it!
send us
an update
LICENSE TYPE:
BSD License 
USER RATING:
3.4/5 14
DEVELOPED BY:
Ed Eliot & Stuart Colville
HOMEPAGE:
spritegen.website-performance.org
CATEGORY:
ROOT \ Internet \ HTTP (WWW)
2 CSS Sprite Generator Screenshots:
CSS Sprite GeneratorCSS Sprite Generator
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!

Last updated on July 28th, 2009

#CSS Sprite #Sprite images #CSS generator #CSS #Sprite #image #generator

Add your review!

SUBMIT