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é.
30 réponses
utilisation appropriée d'IMG
- 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 - utiliser
IMG
(avecalt
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
- 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 - utilisez
IMG
si vous utilisez l'échelle du navigateur pour afficher une image en proportion de la taille du texte. - Utiliser
IMG
pour images de superposition multiples dans IE6 . -
UtiliserIMG
avec unz-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. - en utilisant
img
au lieu debackground-image
peut améliorer considérablement exécution d'animations sur un fond.
quand utiliser CSS background-image
- utiliser des images de fond CSS si le l'image ne fait pas partie du contenu . - sanchothefat
- utilisez les images de fond CSS lorsque faire image-remplacement de texte par exemple. les paragraphes/en-têtes. - sanchothefat
- 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 - utilisez
background-image
si vous avez besoin d'améliorer les temps de téléchargement, comme avec CSS sprites . - utilisez
background-image
si vous n'avez besoin que d'une partie de l'image pour être visible, comme avec les sprites CSS. - utilisez
background-image
avecbackground-size:cover
pour étirer une image de fond pour remplir toute sa fenêtre.
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.
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 .
les réponses ci-dessus ne tiennent compte que de L'aspect de la conception . Je le lis dans SEO aspects.
quand utiliser <img />
- Lors de Votre Image doivent être indexées par le moteur de recherche
- si elle a un rapport avec un contenu qui n'est pas un dessin ou modèle.
- si votre image n'est pas trop petite ( pas d'images emblématiques ).
- Images où vous pouvez ajouter
alt
ettitle
attribut. - Images d'une page Web que vous souhaitez imprimer en utilisant les médias imprimés css
quand utiliser CSS background-image
- Images purement utilisées pour la conception.
- Aucune Relation Avec Le Contenu.
- petites Images que nous pouvons jouer avec CSS3.
- 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.
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:)
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).
à 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.
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.
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'attributbackground-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.
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 .
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.
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 .
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 utilisezimg
, l'image fuit des coins arrondis.
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.
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.
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.
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.
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..
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
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.
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.
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.
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.
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).
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.
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.
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.
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>
.