CSS Sprite, quelle balise html utiliser
Je pense passer à CSS Sprite pour mes images. Le problème principal est que j'ai besoin de quelque chose de compatible avec l'attribut alt. (Seo-purpouse)
Que puis-je utiliser? La première pensée que je pensais était d'utiliser un standard
<img src="1x1.gif" class="mysprite">
Le problème est que je ne peux pas utiliser cela parce que cela plairait à Google parce que suspect:
<img src="1x1.gif" class="mysprite" alt="my keyword1">
<img src="1x1.gif" class="mysprite" alt="my keyword2">
<img src="1x1.gif" class="mysprite" alt="my keyword3">
(la même image "1x1.gif" avec un texte alternatif différent)
Comment pouvons-nous résoudre ce problème?
Si un attribut alt est approprié, alors l'image est un contenu.
Si l'image est un contenu, il ne s'agit pas d'une image arrière-plan, elle ne doit pas être appliquée avec CSS et ne peut pas être transformée proprement en un Sprite.
Les sprites CSS ne sont pas utilisés avec les tags IMG. Ils sont utilisés avec CSS (comme dans CSS sprites). Ils sont généralement utilisés avec les propriétés background-image CSS et :hover pseudo-classe. Lorsqu'une action se produit, généralement un événement de souris, l'image de l'arrière-plan est modifiée en déplaçant l'image d'arrière-plan vers l'image appropriée. Afficher différents états de bouton (normal, actif, etc.) en est un exemple courant. Voici quelques bons exemples de cela .
Pour votre information, l'attribut alt a très peu de valeur de référencement et vous ne devriez pas trop vous en inquiéter, surtout dans le cas des images d'arrière-plan. Si quelque chose vous semble trop optimisé.
J'ai lu de nombreux articles sur les sprites CSS et je constate que la distinction entre le contenu et les images d'arrière-plan est loin d'être aussi nette que la plupart des articles le semblent.
J'ai quatre icônes sur une page qui sont là pour faire quatre paragraphes correspondants "punchier" (http://www.systhermique.com). Est-ce contenu ou fond?
À mon avis, c'est un peu des deux, mais je ne vois pas les inconvénients de l'utilisation d'un sprite CSS pour ces images, bien que je sois enclin à utiliser la stratégie de conteneur d'image décrite ci-dessus afin de conserver les balises alt.