Quand utiliser IMG vs CSS background-image?

Question

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

Facteurs peuvent inclure l'accessibilité, la prise en charge du navigateur, le contenu dynamique, ou tout type de limites techniques ou de l'utilité des principes.

Answer 1

Usages propres de l'IMG

1. Utiliser IMG si vous avez l'intention de les gens d'impression de votre page et vous voulez que l'image soit inclus par défaut. —JayTee
2. Utiliser IMG (avec alt texte) lorsque l'image a une importante signification sémantique, comme une icône d'avertissement. Cela garantit que le sens de l'image peuvent être communiquées à tous les agents, y compris les lecteurs d'écran.

Pragmatique utilise des IMG

1. Utiliser IMG si vous avez l'intention de les gens d'impression de votre page et vous voulez que l'image soit inclus par défaut. —JayTee
2. Utiliser IMG si vous comptez sur le navigateur de mise à l'échelle pour afficher une image en proportion de la taille du texte.
3. Utiliser IMG pour plusieurs superposition d'images dans IE6.
4. Utiliser IMG avec un z-index afin pour un étirement de l'image d'arrière-plan pour remplir la totalité de sa fenêtre.
   Remarque, ce n'est plus vrai avec CSS3 background-size; voir n ° 6 ci-dessous.
5. À l'aide de img au lieu de background-image peut considérablement améliorer les performances des animations sur un arrière-plan.

Lors de l'utilisation de CSS background-image

1. Utiliser les CSS images d'arrière-plan si l' l'image ne fait pas partie du contenu. —sanchothefat
2. Utiliser les CSS images d'arrière-plan lors de l' faire de l'image de remplacement de texte par exemple. les paragraphes/en-têtes. —sanchothefat
3. Utiliser background-image si vous avez l'intention de les gens d'impression de votre page et vous ne voulez pas l'image d'être inclus par défaut. —JayTee
4. Utiliser background-image si vous avez besoin d'améliorer les temps de téléchargement, comme avec des sprites CSS.
5. Utiliser background-image si vous avez besoin pour une partie seulement de l'image pour être visible, avec des sprites CSS.
6. Utiliser background-image avec background-size:cover afin d'étirer une image de fond pour remplir la totalité de sa fenêtre.

Answer 2

C'est un noir et blanc à la décision pour moi. Si l'image est une partie du contenu, comme un logo ou d'un diagramme ou d'une personne (personne réelle, pas un stock de photos de personnes), puis utiliser l' <img /> tag en plus l'attribut alt. Pour tout le reste il y a le CSS images d'arrière-plan.

Les autres temps de l'utiliser CSS, images de fond, c'est quand faisant de l'image de remplacement de texte par exemple. les paragraphes/en-têtes.

Answer 3

Je suis surpris que personne n'a mentionné ce encore: les transitions CSS.

Vous pouvez nativement la transition a div'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'économiser toute sorte de JavaScript ou jQuery animation de fondu un <img/>s' src.

Answer 4

Les navigateurs ne sont pas toujours définies pour imprimer des images d'arrière-plan par défaut; si vous avez l'intention d'avoir des gens d'impression de votre page :)

Answer 5

Si vous avez votre code CSS dans un fichier externe, alors il est souvent plus pratique d'afficher une image qui est fréquemment utilisé à travers le site (comme une image d'en-tête) comme une image de fond, parce que vous avez la possibilité de modifier l'image plus tard.

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 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 auriez à mettre à jour l' src de l'attribut approprié <img> balise dans chaque fichier HTML (en supposant que vous n'êtes pas à l'aide d'un script côté serveur de la langue ou de la 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).

Steve