Utilisez les Sprites CSS pour améliorer les performances de votre site

Qu'est ce que les sprites CSS ?

Les Sprites CSS permettent de regrouper plusieurs images positionnées les unes à côté des autres dans un fichier unique. Grâce à la propriété CSS "background-position", on sélectionnera la partie de cette image que l'on souhaite afficher.

Quels sont les intérêts de regrouper les images ?

Les Sprites CSS présentent plusieurs avantages notamment en terme de performances et d'optimisation :

  • Réduction du nombre de requêtes ;
  • Réunir plusieurs petites images en une grande image permet également de réduire le poids de ces dernières ;
  • Toutes les images sont préchargées : pas de délai pour le changement d'image au survol de la souris ;
  • Améliore la lisibilité du code.

La technique des Sprites CSS

Exemple d'utilisation des sprites cssPour apprendre à utiliser les Sprites CSS, nous allons utiliser l'exemple du site terryoneweb.com avec le regroupement d'images utilisé pour la navigation.

Cette image contient à l'origine trois petites images correspondant à trois état de la navigation du site. Le bleu correspond à l'état actif, le vert au hover (survol de la souris) et enfin, le gris au link (état par défaut).

  1. Regroupez vos images en un seul fichier.
  2. Créez une classe CSS qui regroupe les propriétés communes pour tous les états du menu :
    Exemple :
    .sprite_menu{ background-image: url('/sprite_menu.gif'); background-repeat:no-repeat;}
  3. Créez une classe CSS pour chaque zone à cibler avec la propriété "background-position" :
    Exemple :
    .actif_menu{ background-position: 0 0;}
    .hover_menu{ background-position: 0 -46px;}
    .link_menu{ background-position: 0 -92px;}

 

La propriété "background-position" peut être également utilisée avec des valeurs en pourcentage.