<img /> vs background-image (css) in performance

Question

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.

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 best practice).

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?

I made this jsFiddles that in my chrome browser memory tool, show that the back-ground image option uses less memory.

<img />: http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

References:

1. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Answer 1

Personally I would forget about performance in this instance and focus on what the image is:

1) Image = content

2) Background Image = design

The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I want the image to be "indexed" by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is "content" and you should use an IMG tag.

If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you're happy for the image to not appear on a print out, or you're happy for the image to not appear if CSS is turned off, then usually the image is "design" and you should use a background image.