Here good explanations from Yahoo website (http://developer.yahoo.com/performance/rules.html) :
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Optimize CSS Sprites:
- Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
- Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
- "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels
Here a good website to create sprite :
Other site to explain sprite philosophy:
|Field||Original Value||New Value|
|Original Estimate||2 days [ 172800 ]|
|Remaining Estimate||2 days [ 172800 ]|
|Fix Version/s||0.3.7 [ 15943 ]|
|Affects Version/s||0.3.6.1 [ 16494 ]|
|Affects Version/s||0.3.6.1-RICHFACES [ 16045 ]|
|Priority||Major [ 3 ]||Minor [ 4 ]|
|Status||Open [ 1 ]||Closed [ 6 ]|
|Resolution||Fixed [ 1 ]|