Accélérez le chargement de vos pages avec les Sprites CSS

3.07.2009
|
0 Commentaires
||

Introduction

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 ».

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 :

  1. La première spécifique à l’image contenant les  »sprites »
  2. 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 :

 .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *