Support us:
Amount: EUR
CSS Sprite Generator - SmartSprite 0.5.8 (PHP Version)

SmartSprite 0.3.4 ( PHP-Version )

SmartSprite 0.5.8 ( PHP-Version-Non-Free will be published on github for free usage, soon )

Original Idea and Java-Version from Stanislaw Osinski.
Plz read his documentation, too. SmartSprite Homepage
This Version follows the Syntax and rules of the Original Version but it has limited features.
Alle currently implemented features are in the example below.



If you are interested in the current Version: Feel free to contact me:

group: google groups
by mail: tanila at tanila dot org
the IRC: irc.german-elite.net/6667 #tanila.de
Please send us the url(s) to your page(s) which using smartsprite: Pages using SmartSprite.

Real-Life Examples: Performance Comparison

If you are interested in the non-free-version Smartsprite >= 0.5 contact me.

Examples of the new version (no image is loaded except in internet explorer / lacks support for dataUrls):

Requires:
PHP 4/5/6 CLI (Commandline Interface) with GD_lib

Download:
New Features / Bugfixes:

Version 0.5.2 to 5.8 (published on github, soon): Version 0.5.2 (non-free-version): Version 0.5.1 (non-free-version): Version 0.5 (non-free-version):
Version 0.3.4 (last free version):
Version 0.3.3:
Version 0.3.2: Version 0.3.1: Version 0.3: Version 0.2:


Prepare Your CSS-File:

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-margin since version 0.2
  • sprite-background since version 0.5
  • sprite-colorcount since version 0.5
  • sprite-dataurl since version 0.5







.imageclass1 { display:block; width: 50px; height: 21px; background-image: url('path/image_1.png'); } .imageclass2 { display:block; width: 50px; height: 21px; background-image: url('path/image_2.png'); }
/**	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 :)


Explanations:

/**	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;
}




Pages using SmartSprite_php:


Performance Comparison:

As you can see Smartsprites reduces HTTP-Requests and the data-traffic on the wire.
More examples will follow...

page: paar-familien-beratung.de (SS V 0.5.2 with dataUrl-and optimized images)
 before smartsprite phpafter 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 phpafter 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 phpafter 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


(c) 2009 tanila.de
PC: 1633