Quand utiliser IMG vs CSS background-image?

https://stackoverflow.com/questions/492809

20-08-2019
|

Question

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

Les facteurs peuvent inclure l'accessibilité, la prise en charge du navigateur, le contenu dynamique ou tout type de limite technique ou de principe d'utilisation.

La solution

Utilisations appropriées d'IMG

Utilisez IMG si vous avez l'intention d'avoir personnes imprimez votre page et vous veux que l'image soit incluse par défaut. & # 8212; JayTee
Utilisez alt (avec z-index texte) lorsque l'image a une signification sémantique importante, telle que une 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 de l'IMG

Utilisez img l'attribut alt plus si l'image fait partie du contenu tel que comme un logo ou un diagramme ou une personne (personne réelle, pas de stock photo). & # 8212; sanchothefat
Utilisez background-image si vous utilisez la mise à l'échelle du navigateur pour rendre une image proportionnellement à la taille du texte.
Utiliser background-size:cover pour plusieurs images de surimpression dans IE6 .
~~Utilisez <=> avec un <=> dans l'ordre pour étirer une image d'arrière-plan pour remplir la totalité de sa fenêtre.~~
Notez que ce n'est plus vrai avec CSS3 background-size; voir n ° 6 ci-dessous.
L'utilisation de <=> au lieu de <=> peut considérablement améliorer les performances des animations sur un arrière-plan.

Quand utiliser l'image de fond CSS

Utilisez des images d’arrière-plan CSS si le image ne fait pas partie du contenu . & # 8212; sanchothefat
Utiliser des images d'arrière-plan CSS lorsque faire remplacement d'image du texte par exemple. paragraphes / en-têtes. & # 8212; sanchothefat
Utilisez <=> si vous avez l'intention d'avoir personnes imprimez votre page et vous ne voulez pas que l'image soit incluse par défaut. & # 8212; JayTee
Utilisez <=> si vous devez améliorer les temps de téléchargement, comme avec les sprites CSS .
Utilisez <=> si vous souhaitez qu'une partie seulement de l'image soit visible, comme pour les sprites CSS.
Utilisez <=> avec <=> afin d’agrandir une image d’arrière-plan afin de remplir la totalité de sa fenêtre.

Autres conseils

C'est une décision en noir et blanc pour moi. Si l'image fait partie du contenu, par exemple un logo, un diagramme ou une personne (personne réelle, et non une photo d'archive), utilisez l'attribut <img /> balise plus alt. Pour tout le reste, il y a des images de fond CSS.

L’autre utilisation des images de fond CSS est l’occasion de remplacer le 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);
}

Ceci enregistre tout type d'animation JavaScript ou jQuery dans le fondu de <img/> 's src.

Plus d'informations sur les transitions sur MDN .

Les réponses ci-dessus ne prennent en compte 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 (pas d'icônes iconiques).
Images où vous pouvez ajouter alt et title attribut.
Images d'une page Web que vous souhaitez imprimer à l'aide des médias imprimés css

Quand utiliser CSS background-image

Images purement utilisées pour la conception.
Aucune relation avec le contenu.
Petites images avec lesquelles nous pouvons 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. Voici 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 ainsi la possibilité de la modifier 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. Il suffit 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).

Identique à la 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 seulement appartiennent-ils au contenu? Si oui, j'ai bien fait mon travail.

Certaines réponses compliquent excessivement le scénario. C'est une situation simple et mortelle.

Répondez à cette question chaque fois que vous souhaitez placer une image:

S'agit-il d'une partie du contenu ou du design?

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

De plus, ne considérez PAS à côté des deux techniques, simplement parce que vous souhaiteriez être & "imprimante facile à imprimer &"; ou pas. 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:

Une balise 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 de fond en utilisant background-size attribut CSS3.
L'utilisation de image d'arrière-plan est utile lorsque vous devez basculer de manière dynamique entre des images-objets . 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 les sprites normal et survolé, et modifier dynamiquement la position de l'arrière-plan.

Un autre avantage de l'utilisation de < IMG > La balise est liée au référencement: vous pouvez fournir des informations supplémentaires sur l'image dans l'attribut ALT de la balise image. Il n'existe aucun moyen de fournir de telles informations lorsque vous spécifiez l'image via CSS. Dans ce cas, seul le nom du fichier d'image peut être indexé. par les moteurs de recherche. L'attribut ALT donne définitivement le & Lt; IMG & Gt; tag avantage de SEO sur l'approche CSS. C’est pourquoi, selon moi, il est préférable de spécifier les images que vous voulez bien classer dans les résultats de la recherche d’images (par exemple, Google Image Search) à l’aide de & Lt; IMG & Gt; tag.

Avant-plan = img.

Fond = Fond CSS.

Utilisez des images d'arrière-plan uniquement lorsque cela est nécessaire, par exemple. des conteneurs avec une image en mosaïque.

L’un des principaux avantages de l’utilisation des IMAGES est qu’il est meilleur pour le référencement .

À l'aide d'une image d'arrière-plan, 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.

L’un des gros problèmes de <img /> est la superposition. 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 <=> 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 devrait être utilisé:

Lorsque vous souhaitez que l'image change lorsque la souris est placée sur celle-ci.
~~Lorsque vous souhaitez ajouter des coins arrondis à l'image. Si vous utilisez img, l’image fuit des coins arrondis.~~

Utilisez une image de fond CSS 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 une balise IMG, cela risque d’être plus délicat.

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 d'essayer de modifier de manière dynamique une propriété CSS.

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 du code HTML) - Si vous enregistrez sur la timeline de Chrome des images d'arrière-plan CSS animées par rapport à des balises IMG animées, vous constaterez une réduction considérable des temps de peinture pour les images de fond CSS.

Il y a une autre raison! Si vous avez un design réactif et que vous souhaitez fractionner l'utilisation des images 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.

De plus, 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 fait Facebook 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 dans des articles.

De même, si l'image a une signification ou doit être cliquable, un img est préférable à un fond css . Je pense que pour toutes les autres situations, un fond CSS peut être utilisé.

Bien que ce soit un sujet qui doit être discuté encore et encore.

Étudiant Web de Paris, France

Juste un petit ajout, vous devriez utiliser la balise img si vous voulez que les utilisateurs puissent faire un "clic droit" et "enregistrer une image" / "enregistrer une image", donc si vous avez l'intention de fournir l'image comme une ressource pour les autres.

L’utilisation de l’image d’arrière-plan désactivera (pour autant que je sache sur la plupart des navigateurs) l’option permettant d’enregistrer directement l’image.

Une petite entrée, J'ai eu des problèmes avec les images sensibles ralentissant 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 vous passez aux images d'arrière-plan, le problème a disparu, cela n'est viable que si vous ciblez de nouveaux navigateurs.

IMG charge en premier parce que 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 matière de référencement).

Comme toutes les images définies avec des balises sont indexées (sauf exclusion manuelle) et peuvent générer du trafic depuis les moteurs de recherche si leurs attributs de titre / alt et leurs noms de fichiers sont optimisés correctement (w.r.t un mot clé).

Vous pouvez utiliser les balises IMG si vous souhaitez que les images soient fluides et ajustées à 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 limiter la taille de téléchargement à moins que je ne veuille vraiment animer des icônes, etc.

J'utilise image au lieu d'image d'arrière-plan lorsque je souhaite les rendre totalement extensibles, ce qui est pris en charge par la plupart des navigateurs.

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 sous forme de sprite de fond pour l'optimisation.

Utilisez des balises pour toutes les images qui ne font pas partie de la conception générale et qui sont probablement placées une seule fois, telles que 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 avec une <a> balise.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow