I have a question about css and sprites, I noticed on this site the sprite image below, you will see large gaps between the images, I am just curious why this was done? On other sites with sprites I have noticed they keep the images close to have a smaller sized image.
Is there any reason for the large space between images?
I did this because the box in which they are being used has a variable height. They're shown on the home page in the activity feed, and if the question title is long, it'll wrap to a second or third line. I began with them close together, but other sprites would show when I didn't want them to.
In other words, Nathan is entirely correct!
I'd add that the file size of the sprite image will barely be increased by spacing them out, so I see no downside to it in any situation.
The only reason I could think of for having a large space between sprites would be that the box in which they are being used is large enough to show other surrounding sprites inadvertently. Normally (i.e.: like on most of Yahoo's pages) you'll see the sprites compressed together.
From what I gather, this is the opposite of what the general rule-of-thumb is. Of course, it doesn't make it wrong, either.
Blocks of one color (or transparency) are the easiest to compress, which is why extra whitespace won?t add much to file size. The example image is 2.336KB as a 256-color PNG, but the same size image with no logos (completely transparent) is only 180 bytes. Making the image into a normal tightly-spaced sprite would only reduce the file size to 2.28KB, almost the same. Dropping the number of colors to 128 changes the size to 1.64KB, a much bigger difference. Blurring (loosing detail) where appropriate is also a good technique for dropping size.
While in this case as @Paul Farnell mentioned the reason was to prevent neighbouring images from showing, @Alex Taylor?s uniform grid suggestion is definitely worth it for non-uniform sprites.
Another reason is to use a regular grid that is large enough to accommodate all assets. If the art always starts at the top left of a round-number Cartesian coordinate, the regular spacing makes it much easier to remember, or work out, the correct location while writing the CSS.
Whitespace is pretty cheap in GIF and PNG.
I often use large spacing in sprites because they work better with relative dimensions like em. When users increase text size I don't want a icon close by in teh canvas to appear.