Introduction

Sprites Dans mon article sur les optimisations d'un site, je vous avais parlé des Sprites CSS.

L'idée est de regrouper plusieurs images en une, et de n'afficher qu'une image (donc une partie de la grande), un sprite, grâce au CSS.

Avantage/Inconvénients

Il y a deux avantages avec cette technique :

  • 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.
Par exemple, sur la page d'accueil, en bas, il y a deux images, illustrant Facebook et Twitter. Ces deux images ne sont en fait qu'une :
Sprite
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, sur ma page d'accueil, 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>

web2ico et sprite- représentant respectivement la classe spécifique à l'image et la classe du sprite.

Le CSS correspondant est donc :

 .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; }

Les classes .sprite- ne définissent qu'une seule propriété : background-position. 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 64x64 pixels contenant ce sprite qui est en effet affiché.

Et voilà le résultat :

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

A lire :

A tester :

  • 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/