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

repaint (1)

Personalmente, me olvidaría del rendimiento en este caso y me concentraría en lo que es la imagen:

1) Imagen = contenido

2) Imagen de fondo = diseño

La forma en que tiendo a pensar sobre esto es, ¿quiero que la imagen aparezca en todos los tamaños de pantalla, en todos los dispositivos, con CSS activado o desactivado? ¿Quiero que la imagen sea "indexada" por Google y Facebook? Si la respuesta es afirmativa a todas o alguna de estas preguntas, generalmente la imagen es "contenido" y debe usar una etiqueta IMG.

Si desea que una imagen diferente se muestre en diferentes tamaños de pantalla (o ninguna imagen en algunos dispositivos), o si está feliz de que la imagen no aparezca en una impresión, o si está feliz de que la imagen no aparezca aparece si CSS está desactivado, por lo general, la imagen es "diseño" y debe usar una imagen de fondo.

Estoy creando un sitio que utiliza un complemento de desplazamiento que básicamente anima el desplazamiento. Estoy bastante preocupado por el rendimiento, ya que si inserto algunas imágenes en el sitio, se ve bastante entrecortado cuando se desplaza / anima.

El principal problema que puedo detectar con las imágenes es el problema de reflujo / repintado, cuando la imagen no tiene las dimensiones correctas y, por lo tanto, se escala (tengo que lidiar con esto, conozco las mejores prácticas ).

Con esta afirmación en mente (las imágenes serán escaladas). ¿Qué debería ser mejor, elemento de imagen o divs con esas imágenes como fondos para el rendimiento?

Hice este jsFiddles que, en mi herramienta de memoria del navegador Chrome, muestra que la opción de imagen de fondo usa menos memoria.

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

<img src="..." />

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

<div></div>

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

Referencias: