Quand utiliser IMG vs. CSS background-image?

dans quelles situations est-il plus approprié d'utiliser une balise HTML IMG pour afficher une image, par opposition à une balise CSS background-image , et vice-versa?

les facteurs peuvent inclure l'accessibilité, le support du navigateur, le contenu dynamique, ou tout type de limites techniques ou de principes d'utilisabilité.

779
demandé sur system PAUSE 2009-01-29 21:25:06

30 réponses

utilisation appropriée d'IMG

  1. utilisez IMG si vous avez l'intention d'avoir les gens imprimer votre page et vous voulez que l'image soit inclus par défaut. - JayTee
  2. utiliser IMG (avec alt texte) lorsque l'image a un sens sémantique important, comme une icône d'avertissement . Cela garantit que le sens de l'image peuvent être communiquées à tous les agents utilisateurs, y compris les lecteurs d'écran.

Pragmatique utilise des IMG

  1. utiliser IMG plus attribut alt si l'image est partie du contenu tel qu'un logo ou un diagramme ou une personne (personne réelle, pas stock photo personnes). - sanchothefat
  2. utilisez IMG si vous utilisez l'échelle du navigateur pour afficher une image en proportion de la taille du texte.
  3. Utiliser IMG pour images de superposition multiples dans IE6 .
  4. Utiliser IMG avec un z-index afin à étirer une image de fond pour remplir sa fenêtre entière.

    Note, Ce n'est plus le cas avec CSS3 background-size; voir #6 ci-dessous.
  5. en utilisant img au lieu de background-image peut améliorer considérablement exécution d'animations sur un fond.

quand utiliser CSS background-image

  1. utiliser des images de fond CSS si le l'image ne fait pas partie du contenu . - sanchothefat
  2. utilisez les images de fond CSS lorsque faire image-remplacement de texte par exemple. les paragraphes/en-têtes. - sanchothefat
  3. utilisez background-image si vous avez l'intention d'avoir les gens imprimer votre page et vous ne voulez pas l'image d'être inclus par défaut. - JayTee
  4. utilisez background-image si vous avez besoin d'améliorer les temps de téléchargement, comme avec CSS sprites .
  5. utilisez background-image si vous n'avez besoin que d'une partie de l'image pour être visible, comme avec les sprites CSS.
  6. utilisez background-image avec background-size:cover pour étirer une image de fond pour remplir toute sa fenêtre.
690
répondu system PAUSE 2017-09-19 15:45:43

c'est une décision en noir et blanc pour moi. Si l'image fait partie du contenu tel qu'un logo ou un diagramme ou une personne (personne réelle, pas des photos en stock), utilisez alors la balise <img /> plus l'attribut alt. Pour tout le reste, il y a des images de fond CSS.

l'autre fois pour utiliser les images d'arrière-plan CSS est quand faire image-remplacement de texte par exemple. les paragraphes/en-têtes.

272
répondu roborourke 2009-01-29 18:31:43

je suis surpris que personne n'ait encore mentionné ceci: CSS transitions .

vous pouvez nativement transition une div l 'image de fond:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

cela sauve n'importe quel type D'animation JavaScript ou jQuery pour faner un <img/> 's src .

plus d'informations sur les transitions sur MDN .

98
répondu Robbie JW 2017-01-02 08:32:04

les réponses ci-dessus ne tiennent compte que de L'aspect de la conception . Je le lis dans SEO aspects.

quand utiliser <img />

  1. Lors de Votre Image doivent être indexées par le moteur de recherche
  2. si elle a un rapport avec un contenu qui n'est pas un dessin ou modèle.
  3. si votre image n'est pas trop petite ( pas d'images emblématiques ).
  4. Images où vous pouvez ajouter alt et title attribut.
  5. Images d'une page Web que vous souhaitez imprimer en utilisant les médias imprimés css

quand utiliser CSS background-image

  1. Images purement utilisées pour la conception.
  2. Aucune Relation Avec Le Contenu.
  3. petites Images que nous pouvons jouer avec CSS3.
  4. images répétitives (dans l'icône de l'auteur du blog, l'icône de la date sera répétée pour chaque article etc.,).

comme je vais les utiliser sur la base de ces raisons. Il s'agit de bonnes pratiques d'optimisation des Images par les moteurs de recherche.

57
répondu subhash 2015-06-23 06:54:09

les navigateurs ne sont pas toujours paramétrés pour imprimer des images de fond par défaut; si vous avez l'intention de faire imprimer votre page:)

48
répondu JayTee 2009-01-29 18:32:03

si vous avez votre CSS dans un fichier externe, alors il est souvent commode d'afficher une image qui est utilisée fréquemment à travers le site (comme une image d'en-tête) comme une image de fond, parce qu'alors vous avez la flexibilité de changer l'image plus tard.

par exemple, dites que vous avez le HTML suivant:

<div id="headerImage"></div>

...et CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

quelques jours plus tard, vous modifiez l'emplacement de l'image. Tout ce que vous avez à faire est de mettre à jour le fichier CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

sinon, vous devrez mettre à jour l'attribut src de la balise appropriée <img> dans chaque fichier HTML (en supposant que vous n'utilisez pas un langage de script côté serveur ou CMS pour automatiser le processus).

Aussi les images de fond sont utiles si vous ne voulez pas que l'utilisateur puisse enregistrer l'image (bien que je n'ai pas besoin de le faire).

46
répondu Steve Harrison 2015-07-30 15:07:20

à peu près le même que réponse de sanchothefat , mais d'un aspect différent. Je me pose toujours la question: si je devais supprimer complètement les feuilles de style du site web, les éléments restants seulement appartiennent-ils au contenu? Si oui, j'ai fait mon travail.

40
répondu Török Gábor 2017-05-23 12:02:56

certaines réponses compliquent le scénario ici. C'est un simple morts situation.

il suffit de répondre à cette question chaque fois que vous souhaitez placer une image:

S'agit-il d'une partie du contenu ou d'une partie du dessin ou modèle?

Si vous ne pouvez pas répondre à cette question, vous ne savez probablement pas ce que vous faites ou ce que vous voulez faire!

également, ne pas considérez à côté des deux techniques, juste parce que vous souhaiteriez être "printer friendly" ou non. Aussi ne pas cacher le contenu d'un point de vue de SEO avec CSS. Si vous vous retrouvez à gérer votre contenu dans des fichiers CSS, vous vous êtes tiré une balle dans la jambe. C'est juste une simple décision de ce qui est contenu ou pas. Tous les autres aspects devraient être ignorés.

37
répondu Dyin 2013-06-22 08:58:17

j'ajouterais encore deux arguments:

  • Un img tag est bon si vous avez besoin de redimensionner l'image. Par exemple: si l'image originale est 100px par 100 px, et que vous voulez qu'elle soit 80px par 80px, vous pouvez définir la largeur et la hauteur CSS de la balise img. Je ne connais pas de bonne façon de le faire en utilisant background-image. EDIT: cela peut maintenant être fait aussi avec une image de fond, en utilisant l'attribut background-size CSS3.

  • en utilisant background-image est bon quand vous avez besoin de manière dynamique commutateur entre sprites . Par exemple: si vous avez une image de bouton, et que vous voulez une image séparée affichée lorsque le curseur plane sur l'élément, vous pouvez utiliser une image de fond contenant à la fois les sprites normal et hover, et changer dynamiquement la position de l'arrière-plan.

26
répondu Anders Rabo Thorbeck 2016-06-11 13:11:31

premier plan = img.

Background = CSS background.

15
répondu cjk 2009-05-22 18:03:51

utiliser des images d'arrière-plan uniquement lorsque cela est nécessaire, par exemple des conteneurs avec une image qui tuile.

un des principaux avantages en utilisant IMAGES est qu'il est meilleur pour SEO .

13
répondu Marc Uberstein 2010-09-18 14:14:18

en utilisant une image de fond, vous devez absolument spécifier les dimensions. Cela peut être un problème important si vous ne savez pas vraiment à l'avance ou ne peut pas déterminer.

un gros problème avec <img /> est overlays. Que faire si je veux une ombre intérieure CSS sur mon image ( box-shadow:inset 0 0 5px rgb(0,0,0,.5) )? Dans ce cas, puisque <img /> ne peut pas avoir d'éléments enfants, vous devez utiliser le positionnement et ajouter des éléments vides qui équivaut à un balisage inutile.

en conclusion, c'est assez situationnel.

12
répondu Mat 2014-02-16 14:21:15

un autre avantage de l'utilisation de la balise est lié au référencement - c'est-à-dire que vous pouvez fournir des informations supplémentaires sur l'image dans l'attribut ALT de la balise image, alors qu'il n'y a aucun moyen de fournir de telles informations lors de la spécification de l'image par CSS et dans ce cas, seul le nom du fichier image peut être indexé par les moteurs de recherche. L'attribut ALT donne certainement l'avantage de la balise SEO sur l'approche CSS. C'est pourquoi, selon moi, il est préférable de spécifier les images que vous voulez classez bien dans les résultats de recherche d'image (par exemple Recherche D'Image Google) en utilisant la balise .

12
répondu Pavel Vladov 2018-03-28 14:01:18

deux autres scénarios où background-image devrait être utilisé:

  • quand vous voulez que l'image change quand la souris est plantée dessus.
  • quand vous voulez ajouter des coins arrondis à l'image. Si vous utilisez img , l'image fuit des coins arrondis.
11
répondu Behrang 2014-08-09 12:25:56

utiliser CSS background-image dans le cas de plusieurs peaux ou versions de design. Javascript peut être utilisé pour modifier dynamiquement une classe d'un élément, ce qui va l'obliger à rendre une image différente. Avec une étiquette IMG, ça peut être plus délicat.

9
répondu MK_Dev 2009-02-13 18:29:07

Voici un techniques considération: image sera générée dynamiquement? Il a tendance à être beaucoup plus facile de générer la balise <img> en HTML que d'essayer d'éditer dynamiquement une propriété CSS.

8
répondu Bryan M. 2009-02-02 22:30:31

en ce qui concerne l'animation d'images à L'aide de CSS TranslateX/Y (la bonne façon d'animer html) - Si vous faites un enregistrement de ligne de temps Chrome de fond CSS-images étant animée vs img tags étant animée, vous verrez les temps de peinture sont radicalement plus courts pour le fond css-images.

7
répondu eivers88 2013-01-11 21:21:30

il y a une autre raison! Si vous avez une conception réactive et que vous voulez partager l'utilisation d'images de basse, moyenne et haute résolution pour les appareils par le biais de requêtes médias, vous devriez utiliser des arrière-plans ainsi.

7
répondu Maarten 2013-01-28 13:44:40

Qu'en est-il de la taille de l'image? Si j'utilise la balise img, le navigateur l'échelle de l'image. Si j'utilise CSS background, le navigateur coupe juste un morceau de l'image plus grande.

6
répondu 2009-05-22 18:00:17

aussi, j'ai une section galerie qui a des tailles d'image incohérentes donc même si ces images sont évidemment considérées comme du contenu, j'utilise des images de fond et les centre dans des divs avec une taille définie. Ceci est similaire à ce que facebook fait dans leurs albums..

6
répondu Chris 2011-05-31 17:52:52

img est une balise html pour une raison, donc il doit être utilisé. Pour faire référence ou illustrer des choses, les gens E. g: dans les articles.

Aussi, si l'image a un sens ou doit être cliquable img est mieux qu'un css background . Pour toutes les autres situations, je pense, un CSS background peut être utilisé.

bien que, c'est un sujet qui doit être discuté encore et encore.

Web des Étudiants de Paris, France

6
répondu user589956 2012-02-15 06:52:42

juste un petit pour ajouter, vous devriez utiliser la balise img si vous voulez que les utilisateurs puissent 'clic droit' et 'Enregistrer-image'/'Enregistrer-image', donc si vous avez l'intention de fournir l'image comme une ressource pour les autres.

L'utilisation de l'image de fond (pour autant que je sache sur la plupart des navigateurs) désactivera l'option de sauvegarder l'image directement.

5
répondu dougajmcdonald 2011-11-21 12:52:56

une petite entrée, J'ai eu des problèmes avec les images responsive ralentissant le rendu sur iphone jusqu'à une minute, même avec de petites images:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

mais en passant à l'aide des images de fond le problème est allé loin, ce n'est viable que si ciblant les navigateurs plus récents.

5
répondu winthers 2013-09-06 06:56:07

IMG charger d'abord parce que le src est dans le fichier html lui-même tandis que dans le cas de background-image la source est mentionnée dans la feuille de style de sorte que l'image charge après la feuille de style chargée, retardant le chargement de la page web.

4
répondu Sagi_Avinash_Varma 2014-04-10 13:34:43

HTML est pour le contenu et CSS est pour la conception. L'image est-elle nécessaire et doit-elle être captée par des lecteurs d'écran? Si la réponse est oui, mettez l'image dans le HTML. Si c'est purement pour le style, alors vous pouvez utiliser la propriété background-image dans CSS pour injecter l'image. Tout comme beaucoup de personnes ici ont déjà mentionné précédemment, vous pouvez alors utiliser un pseudo-élément sur l'image si vous le souhaitez.

3
répondu carltonstith 2014-02-15 05:03:49

notez également que la plupart des araignées de moteurs de recherche n'indexent pas les images de fond CSS, donc les images de fond seront ignorées et vous ne serez pas en mesure d'obtenir tout trafic des moteurs de recherche (Pas D'avantage SEO en bref).

où comme toutes les images définies avec des tags sont indexées (sauf exclusion manuelle) et peuvent attirer le trafic des moteurs de recherche Si leur titre/alt attributs et noms de fichiers sont optimisés correctement (W. R. t certains mots-clés).

3
répondu Nadeem Khan 2014-04-16 08:39:39

vous pouvez utiliser des étiquettes IMG si vous voulez que les images soient fluides et d'échelle à différentes tailles d'écran. Pour moi, ces images font surtout partie du contenu. Pour la plupart des éléments qui ne font pas partie du contenu, j'utilise CSS sprites pour garder la taille de téléchargement minimale sauf si je veux vraiment animer des icônes, etc.

2
répondu shingokko 2012-05-05 03:23:17

j'utilise l'image au lieu de l'arrière-plan-image quand je veux les rendre 100% extensible qui a pris en charge dans la plupart des navigateurs.

2
répondu max 2013-01-14 16:49:11

si vous voulez ajouter une image uniquement pour le contenu spécial sur la page ou pour une seule page, vous devez utiliser l'étiquette IMG et si vous voulez mettre l'image sur plus d'une page, vous devez utiliser L'image de fond CSS.

2
répondu Vishal Gupta 2013-04-27 19:52:26

une Autre image de fond d'écran PRO: Background-images pour <ul> / <ol> des listes.

utilisez des images d'arrière-plan si elles font partie de la conception globale et sont répétées sur plusieurs pages. De préférence sous forme de sprite de fond pour l'optimisation.

utilisez des étiquettes pour toutes les images qui ne font pas partie de la conception globale, et sont très probablement placés une fois, comme des images spécifiques pour les articles, les gens, et les images importantes qui méritent d'être ajoutés à images google.

* * la seule image répétée que je joins dans une étiquette <img> est le logo du site/de l'entreprise. Parce que les gens ont tendance à cliquer pour aller à la page d'accueil, ainsi vous envelopper avec une étiquette <a> .

2
répondu Gillian Lo Wong 2014-03-03 22:28:32