Version imprimable
Bonjour,
Alban Lelasseux vous propose une traduction de l'article anglophone de Ignacio Ricci (Rédacteur sur http://www.cssglobe.com) : Creating easy and useful CSS Sprites.
Cet article vous montrera une méthode permettant d'améliorer le temps de chargement des images sur votre site web.
N'hésitez pas à nous faire part de vos questions/suggestions.
Bonne lecture !
C'est vraiment tres sympa comme article :ccool:
il est tres clair, mais en voulant comparer avec ce que fait Google, j'ai pas vraiment le meme comportement..
- sur la démo de l'article, si j'essaie d'enregistrer une image en particulier, j'enregistre en fait l'image transparent.gif (ben normal !)
Sur Google :
- Pour le mini logo qui se trouve à gauche de la zone de recherche sur les pages 'resultats' : si j'essaie d'enregistrer l'image, je récupère en fait le sprite Google ('nav_logo7.png'). Le sprite n'est pas positionné en background, c'est une balise <img>.
- Pour les 'O' des pages résultats, je ne peux pas enregistrer l'image car c'est un lien sur un <span> vide affiché en block, avec un background-image cette fois ci
interessant ces différentes manières de faire ! :mrgreen:
Attention aux problèmes d'accessibilité quand on affiche une image en background CSS.
Si l'image transporte une information, elle doit se retrouver dans le code HTML et non dans le code CSS. Les sprites sont vraiment une très bonne technique, notamment pour les petites icônes dont l'information n'est pas capitale. L'auteur de l'article original aurait quand même pu faire mention des limites des sprites.
Mais sinon, on peut quand même apprendre la technique, et c'est déjà bien !