Projects | pzImageCombine
This is not so much about the technique itself, as that thas been documented many times over the years, but about an easy way to handle the task of combining the images.
The Why
Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast.
The How
There is an easy way to overcome this by combining images into one single image and address the single images using CSS.
CSS for 1st image in row:
background-image : url(combined.png);
background-position : 0px -16px;
CSS for 2nd image in row:
background-image : url(combined.png);
background-position : 0px -32px;
Some more resources dealing with the technique itself:
http://www.alistapart.com/articles/slidingdoors2/
http://wellstyled.com/css-nopreload-rollovers.html
http://www.websiteoptimization.com/speed/tweak/combine/
http://www.quate.net/newsnet/read.php?id=48
The tool
I have been using this technique for some time now and always searched for a tool that would help me combine those images easily. That is why I decided to build my own, currently called pzImageCombine :)
Sure there are many options to do that:
- Online with php (using GD, ImageMagick...)
- Using Photoshop (photoshop actions) or similiar image applications
None of these really done it for me in the past.
This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;)
Current restrictions:
- Only png images are allowed.
- Only one row.
- All source images must have the same size.
Planned features:
- Multiple rows
- Multiple source sizes
- Multiple input formats
- Image selection and sort options
- Drag & drop grid to place images
 Downloads |
||||||
| Type | Name | Date | Hits | Download | ||
 |
Linux_0_0_1_pzIma... | Apr 18, 2009 | 12 |  |
||
|
Description: Linux Version |
||||||
|
Mac_0_0_1_pzImage... | Apr 18, 2009 | 10 | |
||
|
Description: Mac Version |
||||||
|
Win_0_0_1_pzImage... | Apr 18, 2009 | 53 | |
||
|
Description: Windows Version |
||||||