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 à CSS background-image et vice-versa?
Les facteurs peuvent inclure l'accessibilité, la prise en charge du navigateur, le contenu dynamique ou tout type de limites techniques ou de principes d'utilisabilité.
Utilisations appropriées des DIM
- Utilisez
IMGsi vous souhaitez que des personnes imprimez votre page et que vous souhaitiez que l'image soit incluse par défaut. — JayTee - Utilisez
IMG(avec le textealt) lorsque l’image a une signification sémantique importante, telle que ne icône d’avertissement . Cela garantit que la signification de l'image peut être communiquée à tous les agents utilisateurs, y compris les lecteurs d'écran.
Utilisations pragmatiques des DIM
- Utilisez
IMGplus attribut alt si l’image est élément du conten , par exemple un logo, un diagramme ou une personne (personne réelle, pas les photographes). — sanchothefat - Utilisez
IMGsi vous utilisez la mise à l'échelle du navigateur pour restituer une image proportionnellement à la taille du texte. - Utilisez
IMGpour plusieurs images de surimpression dans IE6 . UtilisezIMGavec unz-indexafin de étirer une image d’arrière-plan pour remplir toute la fenêtre.
Remarque: cela n’est plus vrai avec la taille de l’arrière-plan CSS3; voir n ° 6 ci-dessous.- L'utilisation de
imgau lieu debackground-imagepeut considérablement améliorer les performances des animations sur un arrière-plan.
Quand utiliser CSS background-image
- Utilisez des images d’arrière-plan CSS si l’image ne fait pas partie du conten . — sanchothefat
- Utiliser des images de fond CSS lors de l'exécution remplacement de l'image du texte eg. paragraphes/en-têtes. — sanchothefat
- Utilisez
background-imagesi vous souhaitez que des personnes imprimez votre page et que vous ne vouliez pas que l'image soit incluse par défaut. — JayTee - Utilisez
background-imagesi vous devez améliorer les temps de téléchargement, comme avec sprites CSS . - Utilisez
background-imagesi vous souhaitez qu'une partie seulement de l'image soit visible, comme pour les sprites CSS. - Utilisez
background-imageavecbackground-size:coverafin d’agrandir une image d’arrière-plan pour remplir toute la fenêtre.
C'est une décision en noir et blanc pour moi. Si l'image fait partie du contenu, comme un logo, un diagramme ou une personne (personne réelle, et non une photo d'archive), utilisez la balise <img /> ainsi que l'attribut alt. Pour tout le reste, il y a des images de fond CSS.
L'autre fois où utiliser des images d'arrière-plan CSS est lors du remplacement d'image d'un texte, par exemple. paragraphes/en-têtes.
Je suis surpris que personne n'en ait encore parlé: transitions CSS .
Vous pouvez effectuer une transition native de l'image d'arrière-plan d'une div:
#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 enregistre tout type d’animation JavaScript ou jQuery qui atténue le <img/> 'src.
Plus d'informations sur les transitions sur MDN .
Les réponses ci-dessus ne considèrent que l’aspect Design. Je le répertorie dans les aspects de référencement.
Quand utiliser <img />
- Lorsque votre image doit être indexée par le moteur de recherche
- S'il s'agit de contenu ne pas concevoir.
- Si votre image n'est pas trop petite (images non iconiques).
- Images dans lesquelles vous pouvez ajouter l'attribut
altettitle. - Images d'une page Web que vous souhaitez imprimer à l'aide de print media css
Quand utiliser CSS background-image
- Images purement utilisées pour concevoir.
- Aucune relation avec le contenu.
- Petites images auxquelles on peut jouer avec CSS3.
- Répétition d'images (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 en fonction de ces raisons. Ce sont de bonnes pratiques d’optimisation des images par les moteurs de recherche.
Les navigateurs ne sont pas toujours configurés pour imprimer des images d'arrière-plan par défaut. si vous souhaitez que des personnes impriment votre page :)
Si vous avez votre CSS dans un fichier externe, il est souvent pratique d'afficher une image fréquemment utilisée sur le site (telle qu'une image d'en-tête) en tant qu'image d'arrière-plan, car vous avez la possibilité de modifier l'image ultérieurement.
Par exemple, supposons que vous ayez le code 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 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 <img> appropriée dans chaque fichier HTML (en supposant que vous n'utilisez pas de langage de script côté serveur ou CMS pour automatiser le processus).
Les images d'arrière-plan sont également utiles si vous ne souhaitez pas que l'utilisateur puisse enregistrer l'image (bien que je n'ai jamais eu besoin de le faire).
De la même manière que réponse de sanchothefat , mais sous un autre aspect. Je me pose toujours la question suivante: si je supprime complètement les feuilles de style du site Web, les éléments restants uniquement appartiennent-ils au contenu? Si oui, j'ai bien fait mon travail.
Certaines réponses compliquent le scénario ici. C'est une situation simple et mortelle.
Répondez simplement à cette question chaque fois que vous souhaitez placer une image:
Cette partie du contenu ou du design?
Si vous ne pouvez pas répondre à cette question, vous ne savez probablement pas ce que vous faites ou ce que vous voulez faire!
En outre, NE PAS prendre en compte les deux techniques, simplement parce que vous souhaitez être "imprimable" ou non. Aussi, ne masquez pas le contenu d'un point de vue SEO avec CSS. Si vous gérez votre contenu dans des fichiers CSS, vous vous tirez une balle dans la jambe. Ceci est juste une décision triviale de ce qui est contenu ou non. Tous les autres aspects doivent être ignorés.
J'ajouterais deux autres arguments:
Un tag img est utile si vous devez redimensionner l'image. Par exemple. Si l'image d'origine mesure 100 px par 100 px et que vous souhaitez une résolution de 80 px par 80 px, vous pouvez définir la largeur et la hauteur CSS de la balise img.
Je ne connais aucun bon moyen de faire cela en utilisant background-image.EDIT: Cela peut maintenant aussi être fait avec une image d’arrière-plan, en utilisant l’attributbackground-sizeCSS3.Utiliser background-image est utile lorsque vous devez basculer de manière dynamique entre des sprites . Par exemple. Si vous avez une image de bouton et que vous souhaitez afficher une image distincte lorsque le curseur survole l'élément, vous pouvez utiliser une image d'arrière-plan contenant à la fois les sprites normal et survolé et modifier dynamiquement la position de l'arrière-plan.
L’utilisation de la balise <IMG> offre un autre avantage: elle vous permet de fournir des informations supplémentaires sur l’image dans l’attribut ALT de la balise image. Il n’existe aucun moyen de fournir ces informations lors de la spécification de l’image via CSS. Dans ce cas, seul le nom du fichier image peut être indexé par les moteurs de recherche. L'attribut ALT confère définitivement l'avantage de la balise <IMG> SEO à l'approche CSS. C'est pourquoi, selon moi, il est préférable de spécifier les images que vous souhaitez bien classer dans les résultats de la recherche d'images (par exemple, Google Image Search) à l'aide de la balise <IMG>.
Premier plan = image.
Fond = fond CSS.
Utilisez des images de fond uniquement lorsque cela est nécessaire des conteneurs avec image que des tuiles.
L’un des principaux avantages en utilisant IMAGES est que c’est meilleur pour le référencement.
En utilisant une image de fond, vous devez absolument spécifier les dimensions. Cela peut être un problème important si vous ne les connaissez pas réellement ou si vous ne pouvez pas les déterminer.
Un gros problème avec <img /> concerne les incrustations. Et si je veux une ombre interne CSS sur mon image (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Dans ce cas, étant donné que <img /> ne peut pas avoir d'éléments enfants, vous devez utiliser le positionnement et ajouter des éléments vides, ce qui équivaut à un balisage inutile.
En conclusion, c'est assez situationnel.
Quelques autres scénarios dans lesquels background-image devraient être utilisés:
- Lorsque vous souhaitez que l'image change lorsque la souris est survolée.
Lorsque vous souhaitez ajouter des coins arrondis à l'image. Si vous utilisezimg, l’image fuit par les coins arrondis.
Utilisez CSS background-image dans le cas de plusieurs skins ou versions de design. Javascript peut être utilisé pour changer dynamiquement une classe d'un élément, ce qui l'obligera à rendre une image différente. Avec un tag IMG, cela peut être plus compliqué.
Voici une considération technique: l'image sera-t-elle générée dynamiquement? Il est généralement beaucoup plus facile de générer la balise <img> en HTML que de tenter de modifier de manière dynamique une propriété CSS.
Il y a une autre raison! Si vous avez un design réactif et que vous souhaitez fractionner l'utilisation d'images de basse, moyenne et haute résolution pour les périphériques via des requêtes multimédia, vous devez également utiliser des arrière-plans.
Qu'en est-il de la taille de l'image? Si j'utilise la balise img, le navigateur redimensionne l'image. Si j'utilise un arrière-plan css, le navigateur coupe simplement une partie de l'image plus grande.
En ce qui concerne l’animation d’images à l’aide de CSS TranslateX/Y (méthode appropriée pour animer le langage HTML) - Si vous enregistrez sur la timeline Chrome des images d’arrière-plan CSS animées par rapport à des balises IMG animées, les temps de peinture sont considérablement réduits pour le CSS. images de fond.
En outre, j'ai une section de galerie qui a des tailles d'image incohérentes, alors même si ces images sont évidemment considérées comme du contenu, j'utilise des images d'arrière-plan 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, elle doit donc être utilisée. Pour référencer ou illustrer des choses, par exemple, des personnes dans des articles.
Aussi, si l'image a une signification ou doit être cliquable, un img vaut mieux qu'un arrière-plan css. Pour toute autre situation, je pense, un arrière-plan css peut être utilisé.
Bien que ce soit un sujet qui doit être discuté encore et encore.
Étudiant Web de Paris, France
Une petite entrée, j'ai eu des problèmes avec les images sensibles ralentir le rendu sur iPhone pendant une minute, même avec de petites images:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
Mais lorsque l’utilisation des images d’arrière-plan a permis de résoudre le problème, ce problème n’est viable que si vous ciblez de nouveaux navigateurs.
Juste un petit ajout, vous devriez utiliser la balise img si vous voulez que les utilisateurs soient en mesure de "cliquer avec le bouton droit" et de "sauvegarder l'image"/"enregistrer l'image", donc si vous avez l'intention de fournir l'image comme ressource pour autres.
L'utilisation de l'image d'arrière-plan désactivera (autant que je sache sur la plupart des navigateurs) l'option permettant d'enregistrer directement l'image.
IMG load first car le src se trouve dans le fichier html lui-même, alors que dans le cas de background-image, la source est mentionnée dans la feuille de style de sorte que l'image se charge après le chargement de la feuille de style, ce qui retarde le chargement de la page Web.
HTML est pour le contenu et CSS est pour le design. L'image est-elle nécessaire et doit-elle être captée par des lecteurs d'écran? Si la réponse est oui, alors mettez l'image dans le code HTML. S'il s'agit uniquement d'un style, vous pouvez utiliser la propriété background-image de CSS pour injecter l'image. Comme beaucoup de personnes ici ont déjà mentionné, vous pouvez ensuite utiliser un pseudo-élément sur l'image si vous le souhaitez.
Notez également que la plupart des robots des moteurs de recherche n'indexent pas les images d'arrière-plan CSS. Par conséquent, les images d'arrière-plan seront ignorées et vous ne pourrez générer aucun trafic provenant des moteurs de recherche (aucun avantage en termes de référencement).
Là où toutes les images définies avec des balises sont indexées (sauf exclusion manuelle) et peuvent générer du trafic en provenance des moteurs de recherche si leurs attributs title/alt et leurs noms de fichiers sont optimisés correctement (w.r.t un mot clé).
Si vous souhaitez ajouter une image uniquement pour le contenu spécial de la page ou pour une seule page, vous devez utiliser la balise IMG et si vous souhaitez placer une image sur plusieurs pages, vous devez utiliser une image de fond CSS.
Autre image de fond PRO: Images de fond pour les listes <ul>/<ol>.
Utilisez des images d’arrière-plan si elles font partie de la conception générale et se répètent sur plusieurs pages. De préférence en arrière-plan sous forme de sprite pour l'optimisation.
Utilisez des étiquettes pour toutes les images qui ne font pas partie de la conception générale et qui sont probablement placées une seule fois, comme des images spécifiques pour des articles, des personnes et des images importantes qui méritent d'être ajoutées à google images.
** La seule image répétée que je joins à une balise <img> est le logo du site/de la société. Parce que les gens ont tendance à cliquer dessus pour aller à la page d'accueil, vous l'insérez donc dans une balise <a>.
J'utilise image au lieu d'image d'arrière-plan lorsque je veux les rendre 100% étirables, ce qui est pris en charge par la plupart des navigateurs.
Vous pouvez utiliser les balises IMG si vous souhaitez que les images soient fluides et qu’elles s’adaptent à différentes tailles d’écran. Pour moi, ces images font principalement partie du contenu. Pour la plupart des éléments qui ne font pas partie du contenu, j'utilise des sprites CSS pour minimiser la taille de téléchargement, sauf si je veux vraiment animer des icônes, etc.
Juste pour jeter une clé dans les travaux - je suis d'avis que vous ne devriez jamais utiliser la balise img. HTML était destiné au contenu, pas au style visuel. toutes les images de votre page doivent provenir du CSS, laissant votre code HTML pur. (même si cela prend un peu plus de temps à construire)