Example
Click on the right arrow at the bottom to flick through this brief examplary process. To view it, you'll need the Adobe Flash Plugin. You can download it here.
1. Get all images from website
In the first step you have to collect all images of your website into any desired folder on your harddisk.
2. Run the software
In the next step you have to run the software. Use the folder from step one as input folder and any other directory as output folder. For this example use “better” as calculating method and “stylesheet” as configuration method. After running your output folder containes the combined image and a CSS file.
3. Bind the resulting image
Finally you can bind the resulting files into your website. Therefore you have to include the stylesheet into the <head> area of your page:
<head> <link rel="stylesheet" type="text/css" href="path/to/stylesheet" /> </head>
Use the supplied image “blank.gif” as ressource of all your used images and give them the class you got for it in the CSS file.
Image tag:
<img src="path/to/blank.gif" class="demo_png" />
CSS class:
.demo_png { background: url(ImageSpriting_2009-02-06_12-00-00_0.png) -0px -320px no-repeat; height:320px; width:640px; }
The negative left-top-position of the background moves the background image to that position, where the wanted image is placed on the big image.
