De nos jours, ce qui a été accompli avec une <img>balise se fait souvent avec quelque chose comme un <div>avec une image d'arrière-plan CSS définie à l'aide d'un «sprite» CSS et d'un décalage.
Je me demandais quel genre d'effet il a sur le référencement, car nous perdons effectivement l' altattribut (qui est indexé par Google), et nous sommes coincés avec l'attribut 'title' (qui, si je comprends bien, n'est pas indexé).
Est-ce un inconvénient important?
Réponses:
Les sprites CSS ne doivent être utilisés que pour les éléments décoratifs pour cette raison - utilisez <img>des éléments spécifiques à une page et utilisez des sprites pour des éléments décoratifs qui ne sont pas contextuellement pertinents pour le contenu présenté.
Si vous avez besoin d'une image de bouton pour vos éléments de navigation, il est beaucoup plus logique d'ajouter cette image comme arrière-plan sur le lien de navigation plutôt que de baliser comme ceci:
<a href="/">
<img src="/images/home.gif" title="Home" alt="Home Button" />
Home
</a>
(c.-à-d. partout où le contenu de l'image est redondant par rapport au contenu textuel sur la page ou le contenu de l'image pourrait être décrit comme "décoration")
En prime, en séparant les éléments du modèle de site sous forme de sprites, vous pourrez plus tard modifier le "skin" du site en modifiant la feuille de style au lieu de remplacer les anciens fichiers d'image de conception ou de réécrire tout votre balisage HTML.
Vous pouvez utiliser des <img>balises avec des sprites CSS:
<img alt="description of image" src="images/sprite.png" id="someSprite" />sprite.png pourrait être un pixel transparent 1x1 compressé à <50 octets.
Style:
#someSprite {
width:74px;
height:38px;
background:url('/images/sprites.png') left 0px top 84px;
}
De cette façon, vous obtenez l'optimisation des performances des sprites et conservez vos altbalises.
La altbalise est surfaite. Je pense que trop de gens se mettent en quatre pour s'assurer qu'ils ont des altbalises sur leurs pages. Je ne pense pas que ça vous fasse mal de ne pas en avoir. C'est juste une question de s'assurer que si vous avez un img, vous avez un alttag qui lui est assigné.
Je crois que le temps de chargement et les performances du site ont un impact plus important sur le référencement global que les altbalises et pour chaque demande d'image ou demande HTTP, le site va ralentir. Le but d'un sprite CSS est de minimiser ces requêtes et d'accélérer le temps de chargement de votre page.
alttexte est également utilisé par les lecteurs d'écran. Je pense que vous pourriez avoir une opinion différente du texte alternatif si vous étiez aveugle.
J'ai tendance à utiliser des sprites pour les icônes décoratives, ils n'ont rien à voir avec la page dans son ensemble, donc pour le référencement, c'est bien dans ce cas. Tout ensemble d'images que vous avez qui ont toutes les mêmes dimensions qui ne contribuent pas au sens de la page sont de bons candidats pour les sprites CSS.