<img /> background-image (css) in termini di prestazioni vs

Question

Sto costruendo un sito che utilizza un plug-scrolling che anima fondamentalmente lo scorrimento. Sono abbastanza preoccupato per le prestazioni, come se inserissi alcune immagini nel sito, sembra piuttosto discontinuo quando si scorre/si anima.

Il problema principale che posso rilevare con le immagini è il problema di reflow/repaint, quando l'immagine non ha le dimensioni corrette e quindi viene ridimensionata (devo occuparmene, so dello best practice).

Con questa affermazione in mente (le immagini saranno ridimensionate). Cosa dovrebbe essere meglio, elemento immagine o div con quelle immagini come sfondi per le prestazioni?

ho fatto questo jsFiddles che nel mio strumento di memoria del browser Chrome, mostrano che l'opzione immagine back-ground usa meno memoria.

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

<img src="..." /> 

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

<div></div> 

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

Riferimenti:

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

Personalmente vorrei dimenticare le prestazioni in questo caso e concentrarsi su ciò che l'immagine è:

1) Immagine = contenuti

2) Sfondo Im età = disegno

Il modo tendo a pensare a questo è, voglio l'immagine a comparire su tutte le dimensioni dello schermo, su tutti i dispositivi, con i CSS è acceso o spento? Voglio che l'immagine sia "indicizzata" da Google e Facebook. Se la risposta è sì a tutte oa una di queste domande, di solito l'immagine è "contenuto" e dovresti usare un tag IMG.

Se si desidera visualizzare un'immagine diversa con schermi di dimensioni diverse (o nessuna immagine su determinati dispositivi), o se si è felici che l'immagine non appaia su una stampa, o se si è soddisfatti per l'immagine non appare se il CSS è disattivato, quindi di solito l'immagine è "design" e dovresti usare un'immagine di sfondo.