Best practices for CSS sprite image [closed]

Question

I was looking around to find some best practice and hints when building css image sprite. The questions: Consider a site with lots of images:

1. Should I group and put images with approximately same size in one png?
2. What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
3. Is there any recommendation for number of images in one sprite image ?!
4. Is it make any difference on how to put and align images in the sprite image? I just find a hint at http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 which mentioned (keep images Organized, it will be more maintainable) but is it the only reason

If it helps: I use compass sprites utility, and it automatically convert a folder of images to one png file and creates a css file for it. The images aligned under each other automatically

Answer 1

Should I group and put images with approximately same size in one png?

While Michael has a good point on grouping images by usage, you may also want to keep in mind that the optimal sprites have as little whitespace as possible. Saving file requests is awesome, but you do not want to load a bunch of unused pixels instead.

What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!

Imagine a website with a huuuuge collection of icons, buttons and other graphical elements. Now image you put all those elements in one sprite, because, you know, low amount of requests and all. The sprite is 5MB big.

A visitor enters the page, and loading begins. Text appears, but you are still waiting for Megasprite to download. Depending on the filesize and the internet connection, a visitor has to wait a potentially long time before crucial (navigational) elements of the site are usable.

For a simple site a single sprite will do, but when things get more elaborate, it might be beneficial to use a couple of sprites. Furthermore, putting all your images in one sprite is a pain in the gluteus maximus when it comes to maintenance (although automation helps a lot). All in all, huge sprites are bad sprites.

Is it make any difference on how to put and align images in the sprite image?

Not really. There are a few thing you should keep in mind though. First of all, you want the sprite to be as compact as possible; the less unused space the better. However, that may force you to do ridiculous meticulous positioning in CSS. If you're willing to set background-position for each element by hand that's no problem, but nobody will blame you for cheating a little bit and using positions that are easier to work with.

One more thing

Have you considered using SVG sprites? Small in file size, perfectly smooth and crisp at every resolution. CSS Tricks has excellent articles on it here and here

Answer 2

To question 1:

From my experience in working on a large mobile service provider website, it is certainly a good idea to group images together, but probably better grouped logically, by what component or section of the project they belong to, rather than size. So I would group sprites that make a border (sides, rounded corners, etc.) or background images together.

It will make bits of them easier to find and to maintain during development.

On the other hand, if you're making a game and you have all your images created already (e.g. 64 images of animated character) You might as well stick them all in the one file.

Hope this helps.

Michael