web-dev-qa-db-fra.com

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

Je construis un site qui utilise un plugin de défilement qui anime essentiellement le défilement. Je suis assez préoccupé par les performances car si j'insère quelques images dans le site, cela semble assez saccadé lors du défilement/de l'animation.

Le principal problème que je peux détecter avec les images est le problème de refusion/repeinture, lorsque l'image n'a pas les bonnes dimensions et est donc mise à l'échelle (je dois y faire face, je connais le meilleure pratique ).

Avec cette déclaration à l'esprit (les images seront mises à l'échelle). Quoi de mieux, élément d'image ou divs avec ces images comme arrière-plan que pour la performance?

J'ai fait ce jsFiddles qui, dans mon chrome chrome, montre que l'option d'image d'arrière-plan utilise moins de mémoire.

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

<img src="..." />

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

<div></div>

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

Références:

  1. Différence de performances entre les éléments de balise img et les divs avec des images d'arrière-plan?
  2. Quand utiliser 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
cssperformancerepaint
28
Alvaro

Personnellement, j'oublierais les performances dans ce cas et me concentrerais sur ce qu'est l'image:

1) Image = contenu

2) Image de fond = conception

La façon dont j'ai tendance à penser à cela, est-ce que je veux que l'image apparaisse sur toutes les tailles d'écran, sur tous les appareils, avec CSS activé ou désactivé? Est-ce que je veux que l'image soit "indexée" par Google et Facebook. Si la réponse est oui à toutes ou à l'une de ces questions, alors généralement l'image est "contenu" et vous devez utiliser une balise IMG.

Si vous souhaitez qu'une image différente s'affiche à différentes tailles d'écran (ou pas d'image du tout sur certains appareils), ou si vous êtes content que l'image n'apparaisse pas sur une impression, ou que vous soyez content que l'image ne s'affiche pas apparaissent si CSS est désactivé, alors généralement l'image est "design" et vous devez utiliser une image d'arrière-plan.

17
MrCarrot