Quand utiliser IMG vs. CSS background-image?

Dans quelles situations est-il plus approprié d'utiliser une IMGbalise HTML pour afficher une image, par opposition à un 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'utilisation.

Utilisations correctes d'IMG

1. À utiliser IMGsi vous avez l'intention d' imprimer votre page et que vous souhaitez que l'image soit incluse par défaut. - JayTee
2. Utilisez IMG(avec du alttexte) lorsque l'image a une signification sémantique importante, telle qu'une icône d'avertissement . Cela garantit que la signification de l'image peut être communiquée dans tous les agents utilisateurs, y compris les lecteurs d'écran.

Utilisations pragmatiques d'IMG

1. Utilisez l' IMGattribut plus alt si l'image fait partie du contenu , comme un logo ou un diagramme ou une personne (personne réelle, pas des gens de la photo). - sanchothefat
2. À utiliser IMGsi vous comptez sur la mise à l'échelle du navigateur pour rendre une image proportionnellement à la taille du texte.
3. À utiliser IMG pour plusieurs images de superposition dans IE6 .
4. Utilisez IMGavec un z-indexpour étirer une image d'arrière-plan afin de remplir toute sa fenêtre.
   Notez que ce n'est plus vrai avec la taille d'arrière-plan CSS3; voir n ° 6 ci-dessous.
5. L'utilisation imgau lieu de background-imagepeut améliorer considérablement les performances des animations sur un arrière-plan.

Quand utiliser CSS background-image

1. Utilisez des images d'arrière-plan CSS si l'image ne fait pas partie du contenu . - sanchothefat
2. Utilisez des images d'arrière-plan CSS lors du remplacement d'image du texte, par exemple. paragraphes / en-têtes. - sanchothefat
3. À utiliser background-imagesi vous avez l'intention d' imprimer votre page et que vous ne souhaitez pas que l'image soit incluse par défaut. - JayTee
4. À utiliser background-imagesi vous avez besoin d'améliorer les temps de téléchargement, comme avec les sprites CSS .
5. Utilisez cette option background-imagesi vous avez uniquement besoin qu'une partie de l'image soit visible, comme avec les sprites CSS.
6. Utilisez background-imageavec background-size:coverpour étirer une image d'arrière-plan afin de 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 gens de la photo), utilisez l' <img />attribut tag plus alt. Pour tout le reste, il y a des images d'arrière-plan CSS.

L'autre fois pour utiliser des images d'arrière-plan CSS est lors du remplacement d'image du texte, par exemple. paragraphes / en-têtes.

Je suis surpris que personne ne l'ait encore mentionné: les transitions CSS .

Vous pouvez effectuer une transition native sur l' divimage d'arrière-plan de:

#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 pour estomper <img/>les uns src.

Plus d'informations sur les transitions sur MDN .

Les réponses ci-dessus ne prennent en compte que l'aspect Design. Je l'énumère dans les aspects SEO.

Quand utiliser <img />

1. Quand votre image doit être indexée par le moteur de recherche
2. Si cela a un rapport avec le contenu, pas avec le design.
3. Si votre image n'est pas trop petite (pas d'images iconiques).
4. Images où vous pouvez ajouter altet titleattribuer.
5. Images d'une page Web que vous souhaitez imprimer à l'aide du support d'impression 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étées (Dans l'icône d'auteur du blog, l'icône de 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 avez l'intention d'imprimer 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 (comme une image d'en-tête) en tant qu'image d'arrière-plan, car vous avez alors la possibilité de modifier l'image plus tard.

Par exemple, supposons que vous disposez du 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' srcattribut de la <img>balise appropriée dans chaque fichier HTML (en supposant que vous n'utilisez pas un langage de script côté serveur ou un CMS pour automatiser le processus).

Les images d'arrière-plan sont également utiles si vous ne voulez pas que l'utilisateur puisse enregistrer l'image (bien que je n'ai jamais eu besoin de le faire).

À peu près la même chose que la réponse de sanchothefat , mais sous un aspect différent. Je me demande toujours: si je supprimais complètement les feuilles de style du site Web, les éléments restants n'appartiennent-ils qu'au contenu? Si c'est le cas, j'ai bien fait mon travail.

Certaines réponses compliquent trop le scénario ici. Il s'agit d'une situation morte simple.

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

Cela fait-il partie du contenu ou de la conception?

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

En outre, ne considérez PAS à côté des deux techniques, simplement parce que vous souhaitez être "imprimable" ou non. Ne cachez PAS non plus le contenu d'un point de vue SEO avec CSS. Si vous vous retrouvez à gérer votre contenu dans des fichiers CSS, vous vous êtes tiré une balle dans la jambe. Ceci est juste une décision triviale de ce qui est contenu ou non. Tout autre aspect doit être ignoré.

J'ajouterais deux autres arguments:

• Une balise img est bonne si vous devez redimensionner l'image. Par exemple, si l'image d'origine mesure 100 pixels par 100 pixels et que vous souhaitez qu'elle soit de 80 pixels par 80 pixels, vous pouvez définir la largeur et la hauteur CSS de la balise img. Je ne connais aucun bon moyen de le faire en utilisant background-image. EDIT: Cela peut maintenant aussi être fait avec une image d'arrière-plan, en utilisant l' background-sizeattribut CSS3.

• Utiliser background-image est bon lorsque vous devez basculer dynamiquement entre les 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 images-objets normales et planées, et modifier dynamiquement la position d'arrière-plan.

Un autre avantage de l'utilisation de la balise <IMG> 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 via CSS et dans ce cas, seul le nom du fichier image peut être indexé par les moteurs de recherche. L'attribut ALT donne définitivement à la balise <IMG> un avantage SEO sur 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 recherche d'images (par exemple Google Image Search) en utilisant la balise <IMG>.

Premier plan = img.

Arrière-plan = arrière-plan CSS.

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

L'un des principaux avantages de l'utilisation d' IMAGES est qu'il est préférable 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 à l'avance ou si vous ne pouvez pas les déterminer.

Un gros problème avec les <img />superpositions. Et 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, comme <img />il ne peut pas y 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 où background-imagedevraient ê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 utilisez img, l'image s'échappe des coins arrondis.

Utilisez l'image d'arrière-plan CSS dans le cas de plusieurs skins ou versions de conception. Javascript peut être utilisé pour changer dynamiquement une classe d'un élément, ce qui le forcera à rendre une image différente. Avec une balise IMG, cela peut être plus délicat.

Voici une considération technique: l'image sera-t-elle générée dynamiquement? Il est généralement plus facile de générer la <img>balise en HTML que d'essayer de modifier dynamiquement une propriété CSS.

Et la taille de l'image? Si j'utilise la balise img, le navigateur redimensionne l'image. Si j'utilise l'arrière-plan CSS, le navigateur coupe juste un morceau de l'image plus grande.

En ce qui concerne l'animation d'images à l'aide de CSS TranslateX / Y (la bonne façon d'animer du HTML) - Si vous effectuez un enregistrement Chrome Timeline d'images d'arrière-plan CSS en cours d'animation par rapport aux balises IMG en cours d'animation, vous verrez que les temps de peinture sont considérablement plus courts pour le CSS images de fond.

Il y a une autre raison! Si vous avez une conception réactive et que vous souhaitez fractionner l'utilisation des images basse, moyenne et haute résolution pour les appareils via des requêtes multimédias, vous devez également utiliser des arrière-plans.

De plus, 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 d'arrière-plan et je les centre en div avec une taille définie. C'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, les gens par exemple: dans les articles.

De plus, si l'image a un sens ou doit être cliquable, une img est meilleure qu'un arrière-plan CSS . Pour toutes les autres situations, je pense, un fond CSS peut être utilisé.

Cependant, c'est un sujet qui doit être discuté à plusieurs reprises.

Étudiant Web de Paris, France

Juste un petit ajout, vous devez utiliser la balise img si vous voulez que les utilisateurs puissent «cliquer avec le bouton droit» et «enregistrer 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 (pour autant que je sache sur la plupart des navigateurs) l'option permettant d'enregistrer l'image directement.

Une petite entrée, j'ai eu des problèmes avec des images réactives qui ralentissaient 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 lors du passage à l'utilisation d'images d'arrière-plan, le problème a disparu, ce n'est viable que si vous ciblez des navigateurs plus récents.

IMGcharger d'abord parce que se srctrouve dans le fichier html lui-même alors que dans le cas de background-imagela source est mentionnée dans la feuille de style de sorte que l'image se charge après la feuille de style chargée, retardant le chargement de la page Web.

HTML est pour le contenu et CSS pour la conception. L'image est-elle nécessaire et doit-elle être récupérée par les lecteurs d'écran? Si la réponse est oui, mettez l'image dans le code HTML. Si c'est uniquement pour le style, vous pouvez utiliser la propriété background-image en CSS pour injecter l'image. Tout comme beaucoup de gens l'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 araignées des moteurs de recherche n'indexent pas les images d'arrière-plan CSS, donc les images d'arrière-plan seront ignorées et vous ne pourrez pas obtenir de trafic des moteurs de recherche (aucun avantage SEO en bref).

Où, car toutes les images définies avec des balises sont indexées (sauf si elles sont manuellement exclues) et peuvent générer du trafic provenant des moteurs de recherche si leurs attributs de titre / alt et leurs noms de fichiers sont optimisés correctement (par un mot clé).

Vous pouvez utiliser des balises IMG si vous souhaitez que les images soient fluides et à l'échelle de 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 des sprites CSS 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'image d'arrière-plan lorsque je veux les rendre 100% extensibles, ce qui est pris en charge dans 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 l'image sur plusieurs pages, vous devez utiliser CSS Background Image.

Une autre image d'arrière-plan PRO: Images d'arrière-plan pour <ul>/ <ol>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 en arrière-plan pour l'optimisation.

Utilisez des balises pour toutes les images qui ne font pas partie de la conception globale et qui sont très probablement placées une fois, comme des images spécifiques pour des articles, des personnes et des images importantes qui méritent d'être ajoutées aux images Google.

** La seule image répétée que j'inclus dans une <img>balise est le logo du site / de l'entreprise. Parce que les gens ont tendance à cliquer dessus pour accéder à la page d'accueil, vous l'enveloppez donc avec une <a>balise.