Make sure that you have prepared Your css-file!
Important: SmartSprite PHP supports relative URLs only at the moment! Here is a short example: | ||
Unprepared CSS-File: | Prepared CSS-File:
| |
|
/** sprite: mysprite;
sprite-image: url('path/mysprite.gif');
sprite-margin: 30;
sprite-background: #bfcad9;
sprite-colorcount: 65536;
sprite-dataurl: true;
sprite-layout: vertical; */
.imageclass1 {
display:block;
width: 50px;
height: 21px;
background-image: url('path/image_1.png');
/** sprite-ref: mysprite; */
}
.imageclass1 {
display:block;
width: 50px;
height: 21px;
background-image: url('path/image_2.png');
/** sprite-ref: mysprite; */
} |
|
Thats all you have to do.
Now SmartSprite PHP can handle the rest of the task :) |
/** sprite: mysprite; sprite-image: url('path/mysprite.gif'); sprite-margin: 30; sprite-layout: vertical; */ |
Lables the smarsprite you want to be created. You can have as many as you like. give the filename and the URL where the SmartSprite will be stored and uses after it has been created. sprite-layout: ... sets the layout of the SmartSprite: horizontal or vertical sprite-margin: ... sets the margin between the image files inside the spriteimage in pixel. Notes: supported output formats are: gif,png and jpg if you want to have transparency supported: dont use jpg for your SmartSprite! |
.imageclass1 { ... ... background-image: url('path/image_1.png'); /** sprite-ref: mysprite; */ } |
this will be replaced by the SmartSprite that you have defined in mysprite the background-position will be calculated automatically. Notes: supported input-filetypes are: gif, png, jpg, swf, bmp, xbm make sure that the sprite-ref declaration is below or in the same line as the background-image declaration and inside de {}-block |
The result of obove Example would finally look like this:
.imageclass1 { display:block; width: 50px; height: 21px; background-image: url('path/mysprite.gif') no-repeat top left; background-position: 0 0; } .imageclass2 { display:block; width: 50px; height: 21px; background-image: url('path/mysprite.gif') no-repeat top left; background-position: 0 -198px; } |
page: paar-familien-beratung.de (SS V 0.5.2 with dataUrl-and optimized images) | ||
before smartsprite php | after smartsprite php non-IE / IE |
|
css-images: | 25 | 0 / 1 |
image weight: | 141.4 kb | 0 / 82.0 kb |
css-weight (1): | 1.9 kb | 61.3 kb |
requests (2): | 26 | 1 / 2 |
data traffic: | 143.3 kb | 61.3 kb / 143.3 kb |
summary (IE): | 26 Req at 143,3 kb | 2 Req at 143.3 kb |
summary (non-IE): | 26 Req at 143,3 kb | 1 Req at 61.3 kb |
(1) minified and gipped file size (2) css images and css file |
page: www.ellen-johannsen.de (SS V 0.5 with dataUrl-support) | ||
before smartsprite php | after smartsprite php non-IE / IE |
|
css-images: | 8 | 0 / 1 |
image weight: | 828.0 kb | 0 / 141.5 kb |
css-weight (1): | 1.5 kb | 139.7 kb |
requests (2): | 9 | 1 / 2 |
data traffic: | 829.5 kb | 139.7 kb / 281.2 kb |
summary (IE): | 9 Req at 829.5 kb | 2 Req at 281.2 kb |
summary (non-IE): | 9 Req at 829.5 kb | 1 Req at 139.7 kb |
(1) minified and gipped file size (2) css images and css file |
page: www.spheromics.com (SS V 0.5 with dataUrl-support) | ||
before smartsprite php | after smartsprite php non-IE / IE |
|
css-images: | 36 | 0 / 1 |
image weight: | 165.0 kb | 0 / 92.3 kb |
css-weight (1): | 2.1 kb | 90.5 kb |
requests (2): | 37 | 1 / 2 |
data traffic: | 167.1 kb | 90.5 kb / 182.5 kb |
summary (IE): | 37 Req at 167.1 kb | 2 Req at 182.5 kb |
summary (non-IE): | 37 Req at 167.1 kb | 1 Req at 90.5 kb |
(1) minified and gipped file size (2) css images and css file |