Si j'ai le choix d'insérer des images directement dans le HTML ou dans le CSS, dites par exemple un lien enveloppé dans une image que je pourrais faire soit ...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
4 Réponses :
Si l'image a du contexte, tel qu'un logo ou une photo, je vous suggérerais de le charger en tant que Si une image n'a aucun contexte dans la portée de la page, je pense que le bon endroit pour cela est défini dans le CSS qui contrôle la conception.
L'idée entière est de séparer votre présentation de votre contenu autant que vous le pouvez. Une image peut être un contenu, et si oui, devrait être dedans. Assurez-vous que vous fournissez un texte alt pour des raisons d'accessibilité et de référencement.
Je suis d'accord, en d'autres termes, si l'image est contenue, utilisez IMG, si l'image fait partie de la conception de la mise en page / graphique du site utilise CSS.
@stivlo a ajouté une ligne dans l'image en tant que contenu, merci.
Utiliser des images dans HTML est meilleur lorsque l'image a une signification contextuelle ... S'il s'agit d'une image décorative sans signification contextuelle, utilisez CSS. CSS est pour la présentation, HTML est pour le contenu.
Une image dans HTML est destinée à fournir une signification visuelle dans son contexte, avec un texte de texte significatif. L'utilisation d'un élément A sans contenu doit être évitée car son contenu aura une relation avec le lien, pour les navigateurs et les web-robots (un tel bot).
Utilisez des images CSS
@Johnkurlak mieux encore, quelles sont les points de vue de Google? Ils peuvent détecter et faire pénaliser pour le texte caché de nos jours: Google. com / support / webmasters / bin / réponse.py? Réponse = 66353
@Doozer Droite, de nos jours, ces hacks sont mieux évités. S'il n'est pas utile pour l'utilisateur, ne le faites pas.
Merci c'est ce que j'avais besoin de savoir.
Pas toujours. Voir cette réponse de Matt Cutts of Google: threadwatch.org/node/4313#Comment-26923 . L'avoine de Seomoz le recommande également: Seomoz.org/blog/css-Image -Replacements-and-SEO
Généralement, j'essaie de mettre autant d'images dans CSS que possible mais Doozer et Mario ont de bons points. Si l'image est importante pour le contexte, elle peut aller dans le HTML. Je vais également utiliser des balises Une chose que CSS peut faire ce lorsque le texte doit flotter et une image.
ne peut pas CSS Image Sprites . C'est le seul avantage de performance réel que vous obtiendrez d'une ou d'une autre. Les sites Web de performance-affamés comme YouTube.com combinent de nombreuses images en une seule image composite afin de réduire le trafic HTTP (et donc les temps de chargement de la page). Par exemple, c'est un sprite pris de youtube.com.
Les sprites sont définitivement un domaine qu'ils ne fonctionnent pas, vous avez raison. Les sprites typiquement sont des conceptions ciblées, elles appartiennent donc vraiment à la CSS de toute façon.
@DoozerFeLake c'est vrai. Je ne me souviens peut-être jamais de voir des sprites utilisés pour les galeries de photos ou la photo au début d'un article, par exemple.
Suivez les principes de Semantic HTML. Si l'image est contentée, c'est-à-dire une vignette, une photo ou une touche, utilisez un élément Un exemple plus spécifique: Si vous utilisez votre image comme icône à côté d'une liaison texte, utilisez une image de fond: Si votre image est la touche elle-même, sans aspect texte, utilisez un élément . S'il s'agit d'une partie de la conception de page, une image d'arrière-plan peut être plus appropriée.
avec un attribut ALT approprié qui fonctionnerait pour substituer à l'image si elle est indisponible.
