title: CSS Sprite - Does the image is loaded everytime I call a class
body: <p>I have my HTML where I have added famfamfam sprite:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="resources/css/famfamfam.css"&gt;
  </code></pre>
  
  <p>My CSS has styles like this:</p>
  
  <pre><code>.fam{display:inline-block;height:16px;width:16px;background:url('../images/famfamfam.png') no-repeat 0 0;vertical-align:baseline;}
  
  .fam.accept{background-position: -0px -0px}
  .fam.add{background-position: -16px -0px}
  .fam.anchor{background-position: -32px -0px}
  </code></pre>
  
  <p>So in order to add an image is can do somethign like this:</p>
  
  <pre><code>&lt;span class="fam add"&gt;Hello&lt;/span&gt;
  </code></pre>
  
  <p>I know my question might sound very dumb, but:</p>
  
  <blockquote>
    <p>Does every time that I add a  element does the famfamfam.png is loaded? Or how does sprite works? I don't want to over kill my page.</p>
  </blockquote>