Introduction
Avantage/Inconvénients
- Le premier est de réduire le nombre de requêtes HTTP vers le serveur pour récupérer les images. Ces requêtes sont relativement coûteuses en temps pour l’utilisateur. Avec cette technique, une seule requête permet d’avoir de nombreuses images
- Le second est de réduire légèrement le volume total à télécharger. En effet, la taille de l’image contenant les sprites est légèrement inférieure à la somme de la taille des petites images séparées.
Par contre :
- La technique est un peu plus complexe à mettre en place.
- Le code HTML et CSS est légèrement plus gros.
- Si le navigateur ne supporte pas le CSS (surtout en mobilité, je pense), les images ne seront pas correctement affichées, et la mise en page peut-être sérieusement modifiée !
Procédure
Il faut donc créer une image qui contient les images à mettre en sprite, en ligne ou en colonne. Pour plus de facilité ensuite, il est conseillé d’avoir un espacement régulier entre les »sprites ».
Ensuite, c’est au tour de CSS de jouer. Le plus simple est d’utiliser une liste, et d’affecter à chaque ligne (balise »<li> ») deux classes :
- La première spécifique à l’image contenant les »sprites »
- La seconde spécifique au »sprite »
Ainsi, le code HTML est le suivant :
<div>
<ul>
<li class="web2ico sprite-facebook-logo">
<a href="..... ">
<li class="web2ico sprite-twitter">
<a href="http://www.twitter.com/calexo.... ">
</ul>
</div>
Avec le code CSS suivant :
.web2ico {
background: transparent url(img/web2-sprite.png) no-repeat top left;
margin-top : 30px;
margin-left : 50px;
display: inline-block;
height: 64px;
padding-left: 74px;
}
.sprite-facebook-logo { background-position: 0 0px; }
.sprite-twitter { background-position: 0 -64px; }
C’est ainsi que nous positionnons le »cadre » sur le bon »sprite ». Pour le »sprite-twitter », nous remontons l’image de 64 pixels, et c’est le logo Twitter qui se retrouve alors en haut. La hauteur étant limitée à 64 pixels dans la classe »web2ico », c’est le carré de 64×64 pixels contenant ce sprite qui est en effet affiché.
Conclusion
Et vous, utilisez-vous déjà les Sprites CSS ? Envisagez-vous d’en utiliser ? N’hésitez pas à venir nous faire part de vos expériences ici !
Pour poursuivre :
- Un dossier réalisé par WebSiteOptimisation, détaillant comment Yahoo! et AOL ont mis en place cette technique sur leurs sites : http://www.websiteoptimization.com/speed/tweak/css-sprites/
- Un générateur de sprites, avec le CSS associé, à partir d’un ZIP contenant les images. A priori une très bonne idée, mais que je n’ai pas réussi à mettre en place ! Pourquoi devoir espacer les images ? Le positionnement des »sprites » était mauvais… http://spritegen.website-performance.org/