Le blog Optimisation de site: les sprites

Dans un post précédent, je vous parlais des différentes façons d’optimiser un site internet. Parmi elles, la bien nommée technique des sprites. Mais en quoi consiste-t-elle ?

Si votre site comporte de nombreuses images, ce sont autant de requêtes HTTP que le navigateur de votre visiteur envoie à votre serveur. Les sprites sont là pour vous aider à réduire le nombre de ces échanges et donc le temps de chargement de vos pages. Mais comment ?

L’idée générale est de regrouper vos images sur une seule et même « planche », afin que le navigateur charge, non plus une centaine d’images, mais une seule les regroupant toutes. Il vous faudra ensuite utiliser l’exemple CSS suivant afin de placer vos images correctement sur chacun des éléments de votre site :

background: url(/images/mon_image_sprite.png) -100px -200px no-repeat

Le concept reste simple mais techniquement, il ne vous sera pas vraiment possible de créer une seule image sprite avec toutes les images de votre site car vous devrez faire face à plusieurs contraintes :

• Identifier les différents types d’images qui constituent votre site (boutons, icônes, images de fond…) et créer un sprite pour chaque : cela vous permettra de garder une certaine cohérence et plus de clarté dans vos fichiers.
• Séparer les images de fond « fixe », avec la propriété background-repeat: no-repeat, de celles qui se répètent, repeat-x ou repeat-y : suivant le contexte un sprite ne doit pas être construit de la même manière. Vous pouvez organiser vos images :
  • En grille pour les images de fond fixe (no-repeat)
  • En ligne (no-repeat ou repeat-y)
  • En colonne (no-repeat ou repeat-x)

Pour vous aider, voici un outil très pratique, CSS sprites generator qui vous aidera à construire automatiquement vos sprites, et qui vous fournira le code CSS à utiliser : un gain de temps non négligeable !