title: <img /> vs background-image (css) in performance
body: <p>I am building a site that is using a scrolling plugin that basically animates the scrolling.
  I am quite concern about performance as if I insert some images in the site, it looks quite choppy when scrolling/animating.</p>
  
  <p>The main problem I can detect with images is the reflow/repaint issue, when the image doesn't have the correct dimensions and therefore is scaled (I have to deal with this, I know about the <a href="https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#SpecifyImageDimensions" rel="noreferrer">best practice</a>).</p>
  
  <p>With this statement in mind (images will be scaled). What should be better, image element or divs with those images as backgrounds as for performance?</p>
  
  <p>I made this jsFiddles that in my chrome browser memory tool, show that the back-ground image option uses less memory.</p>
  
  <p><strong><code>&lt;img /&gt;</code></strong>: <a href="http://jsfiddle.net/ek6Xn/" rel="noreferrer">http://jsfiddle.net/ek6Xn/</a></p>
  
  <pre><code>&lt;img src="..." /&gt;
  </code></pre>
  
  <p><strong><code>background-image</code></strong>: <a href="http://jsfiddle.net/ek6Xn/1/" rel="noreferrer">http://jsfiddle.net/ek6Xn/1/</a></p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>div {
      background:url(...);
      background-size:100% 100%;
  }
  </code></pre>
  
  <p>References:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/3711932/difference-in-performance-between-img-tag-elements-vs-divs-with-background-image">Difference in performance between img tag elements vs divs with background images?</a></li>
  <li><a href="https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image">When to use IMG vs. CSS background-image?</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/" rel="noreferrer">http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/</a></li>
  <li><a href="http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode" rel="noreferrer">http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode</a></li>
  </ol>