title: Best practices for CSS sprite image
body: <p>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:</p>
  
  <ol>
  <li>Should I group and put images with approximately same size in one <code>png</code>? </li>
  <li>What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!</li>
  <li>Is there any recommendation for number of images in one sprite image ?!</li>
  <li>Is it make any difference on how to put and align images in the sprite image? I just find a hint at <a href="http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340" rel="noreferrer">http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340</a> which mentioned (keep images Organized, it will be more maintainable) but is it the only reason</li>
  </ol>
  
  <p>If it helps:
  I use compass sprites utility, and it automatically convert a folder of images to one <code>png</code> file and creates a <code>css</code> file for it. The images aligned under each other automatically</p>