Question Quand utiliser IMG vs. CSS background-image?


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

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


780
2017-09-23 23:58


origine


Réponses:


Utilisations appropriées de IMG

  1. Utilisation IMG si vous avez l'intention d'avoir gens imprimez votre page et vous voulez que l'image soit incluse par défaut. -JayTee
  2. Utilisation IMG (avec alt 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 dans tous les agents d'utilisateur, y compris les lecteurs d'écran.

Utilisations pragmatiques de IMG

  1. Utilisation IMG plus l'attribut alt si l'image est une partie du contenu comme un logo ou un diagramme ou une personne (une personne réelle, pas des gens de photo stock). -sanchothefat
  2. Utilisation IMG si vous comptez sur la mise à l'échelle du navigateur pour rendre une image proportionnelle à la taille du texte.
  3. Utilisation IMG  pour plusieurs images de superposition dans IE6.
  4. Utilisation IMG avec un z-index en ordre à étirer une image d'arrière-plan pour remplir toute sa fenêtre.
    Notez que ceci n'est plus vrai avec CSS3 background-size; voir # 6 ci-dessous.
  5. En utilisant img au lieu de background-image peut considérablement améliorer les performances des animations sur un arrière-plan.

Quand utiliser l'arrière-plan CSS

  1. Utilisez les images d'arrière-plan CSS si le image ne fait pas partie du contenu. -sanchothefat
  2. Utilisez les images d'arrière-plan CSS lorsque Faire image-remplacement du texte par exemple. paragraphes / en-têtes. -sanchothefat
  3. Utilisation background-image si vous avez l'intention d'avoir gens imprimez votre page et vous ne voulez pas que l'image soit incluse par défaut. -JayTee
  4. Utilisation background-image si vous devez améliorer les temps de téléchargement, avec Sprites CSS.
  5. Utilisation background-image si vous n'avez besoin que d'une partie de l'image pour être visible, comme avec les sprites CSS.
  6. Utilisation background-image avec background-size:cover afin d'étirer une image de fond pour remplir toute sa fenêtre.

671
2018-01-29 18:31



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

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


271
2018-01-29 18:32



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

Vous pouvez faire une transition nativement divL'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 permet d'éviter tout type d'animation JavaScript ou jQuery <img/>de src.

Plus d'informations sur les transitions sur MDN.


96
2018-04-10 06:18



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

Quand utiliser <img /> 

  1. Quand votre image doit être indexé par le moteur de recherche
  2. Si elle a un rapport avec le contenu à ne pas concevoir.
  3. Si votre image n'est pas trop petite (images non iconiques).
  4. Images où vous pouvez ajouter alt et title attribut.
  5. Images d'une page Web que vous souhaitez imprimer en utilisant le 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. Répétition des 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 moteurs de recherche d'images.


55
2018-04-20 17:01



Les navigateurs ne sont pas toujours configurés pour imprimer les images d'arrière-plan par défaut. Si vous avez l'intention d'avoir des gens imprimer votre page :)


48
2018-05-22 18:03



Si vous avez votre fichier 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) comme image d'arrière-plan, car vous avez ensuite la possibilité de modifier l'image ultérieurement.

Par exemple, disons que vous avez 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 changez 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 le src attribut de la appropriée <img> tag dans chaque fichier HTML (en supposant que vous n'utilisez pas un langage de script côté serveur ou CMS automatiser le processus).

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


44
2018-02-13 18:29



À peu près le même que La réponse de sanchothefat, mais d'un aspect différent. Je me demande toujours: si je supprimais complètement les feuilles de style du site, faites les autres éléments seulement appartient au contenu? Si oui, j'ai bien fait mon travail.


39
2018-02-02 22:30



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

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

Est-ce une partie du contenu ou une partie du design?


37
2018-05-22 18:00



J'ajouterais deux autres arguments:

  • Un img tag est bon si vous avez besoin de redimensionner l'image. Par exemple. Si l'image d'origine est de 100 px par 100 px, et que vous voulez qu'elle soit de 80 px par 80 px, vous pouvez définir la largeur CSS et la hauteur de la balise img. Je ne connais aucun moyen de le faire en utilisant background-image. EDIT: Cela peut maintenant être fait avec une image de fond, en utilisant le background-size Attribut CSS3.

  • En utilisant image de fond est bon quand vous avez besoin de dynamiquement basculer entre les sprites. Par exemple. Si vous avez une image de bouton et que vous souhaitez qu'une image séparée s'affiche lorsque le curseur survole l'élément, vous pouvez utiliser une image d'arrière-plan contenant les sprites normal et de survol, et modifier dynamiquement la position d'arrière-plan.


24