8
votes

Divs avec des arrière-plans d'image vs. IMG Tags

Je me demandais quelle est la meilleure pratique concernant les divs avec des arrière-plans et des étiquettes IMG. Je comprends que DIVS avec des arrière-plans peut avoir des trucs sur eux et ce qui n'est pas, mais si c'est le cas avec juste avoir une image, qui est la méthode préférée? Peut-être qu'une meilleure question est .. Les tags img sont-ils obsolètes? Lorsque vous avez une image, une liaison doit utiliser une étiquette IMG ou une DIV?

merci! Matt Mueller


0 commentaires

5 Réponses :


15
votes

Les arrière-plans de div ne devraient être que: des images de fond pour style. Les balises IMG devraient être pour quand vous affichez une image réelle comme une image elle-même, disons que vous montrez une photo de quelque chose. Vous devez utiliser une étiquette d'image et non un div bg


0 commentaires

5
votes

est l'image de la mise en page ou du contenu?

Si l'image est liée liée je voudrais utiliser CSS et l'avoir dans une div ... Si son contenu est lié, je l'aurais dans un IMG ...

espère que cela aide!


0 commentaires

1
votes

La balise img n'est pas obsolète. Vous l'utilisez avec des images dynamiques, qui vont et vont de votre système.

Les images de fond sur les divs sont utiles lorsque vous avez un ensemble statique d'images faisant partie de votre conception. Parfois, vous pouvez les fusionner dans une grosse image pour minimiser la durée de charge et le nombre de requêtes HTTP PRO.


0 commentaires

9
votes

Pensez-y comme une balise sémantique:

  1. s'il s'agit d'une "image" de la page, en ce qui concerne la signification de la page, utilisez la balise IMG.

  2. Si c'est quelque chose qui n'est pas significatif pour la signification de la page, c'est-à-dire. image d'arrière-plan, utilisez une image d'arrière-plan sur n'importe quel élément (pas seulement un div).

    Cette différence n'a pas d'importance compte tenu de la manière dont la page s'affiche dans la plupart des navigateurs, mais a un sens différent pour ceux qui n'interlèvent pas les images visuellement.

    Essayez d'imaginer comment les éléments seront interprétés par des malvoyants visuellement.

    Il peut également y avoir un comportement légèrement différent des moteurs de recherche-- Je ne sais pas si les moteurs de recherche récupéreront des images de fond pour leur recherche d'image. Si vous voulez vraiment l'image là-bas, une balise IMG est plus sûre.


2 commentaires

Précisément: sémantique. N'oubliez pas non plus que la balise img a l'attribut alt . Ce texte alternatif (par exemple décrivant l'image) est utile pour les scénarios où l'image a une signification sémantique et peut être utilisée pour les moteurs de recherche, des applications text-kiosphériques pour les connexions Internet auditives et les mauvaises connexions Internet.


Sans oublier que c'est l'imprimante.



5
votes

Un bon moyen de regarder ceci est de visualiser votre site avec des feuilles de style désactivées. Vous découvrirez rapidement que toutes les balises div avec des images d'arrière-plan n'apparaissent pas. Toutes vos images IMG Tag sont là où elles devraient être. J'utiliserais des balises div avec des images de fond pour tous les aspects de la conception et de la mise en page de site et utilisez des balises IMG pour tout le reste.

Les balises IMG ont des propriétés ALT et des propriétés de titre. Celles-ci sont utilisées à la place de l'image lorsqu'elle ne se charge pas ou à la place de l'image dans le texte uniquement ou à l'écran.


0 commentaires