Réduire ses requêtes HTTP avec les Sprites

spriteArticle Dernière mise à jour le 13 avril 2013 à 12h39

A ne surtout pas confondre avec la célèbre marque de soda, un sprite CSS est une technique employée par un grand nombre de webdesigners consistant à réunir plusieurs images en une seule et même image. Cela a pour conséquence de réduire significativement la charge de travail de votre navigateur et d’augmenter ainsi la vitesse de chargement de votre site Internet.

La méthode traditionnelle utilise deux images associées, image standard + image survolée, que nous appellerons “couple d’images”. Présents en grand nombre dans une page web, ces couples entraînent une augmentation significative du nombre de requêtes HTTP de votre navigateur, influant directement sur le temps de chargement :

  • La méthode traditionnelle demande 2 requêtes pour un couple d’images
  • Un sprite équivaut à une seule et unique requête, peu importe le nombre d’images

Exemple requêtes, avec et sans sprite
On constate ici que le nombre de requêtes varie du simple au triple sur une page simplement agrémentée de trois pictogrammes (a, b, c). Initialement de 282ms, le chargement passe à 218ms avec l’utilisation du sprite, ce qui équivaut à un gain en vitesse d’exécution de l’ordre de 22% !

 

L’utilité des sprites CSS ne s’arrête pas là. Outre le gain en vitesse d’exécution, cette technique trouve également un rôle majeur dans l’esthétique d’affichage.

Lorsque vous appliquez un :hover sur une balise contenant une image dans le but d’en faire apparaître une autre au survol, il y a un délai de quelques millisecondes (selon votre navigateur et votre connexion) nécessaire au chargement de l’image survolée. Et cela s’apparente à un petit scintillement assez désagréable à l’œil…

Exemple d'effet au survol d'une image lien standard

Fonctionnement du sprite CSS

La méthode traditionnelle utilise simplement la propriété CSS background-image. Avec l’utilisation d’un sprite CSS, on utilisera plutôt la propriété background couplée à un background-position pour déplacer la zone de l’image que vous voulez faire apparaître grâce aux coordonnées des axes X et Y.

Exemple de Sprite avec Zone visible et Axes X,Y

La partie visible est l’icône “poubelle”, cette partie est déterminée via CSS avec la propriété background-position; La taille de la partie visible dépendra des propriétés width et height que vous appliquerez aux balises contenant les images, soit par un sélecteur générique (#div_conteneur a, #div_conteneur span) ou par leurs class/id respectifs (#div_conteneur .a, #div_conteneur .b, … )

Créer votre sprite

Les plus expérimentés en PAO (Production Assistée par Ordinateur) pourront créer leur propre sprite avec un logiciel de retouche d’image tel que Photoshop, Gimp, Paint Shop Pro et même… Paint !
Et si vous ne savez pas les utiliser, pas de panique ! Il existe des outils en ligne très simples qui vous permettent de générer vos propres sprites gratuitement :

  • Sprite Generator vous permet de combiner vos images fournies (depuis une archive ZIP) en une seule image. Une multitude de propriétés personnalisables vous sont proposées : redimensionnement, qualité d’image, options du CSS généré … Ceci afin de vous faciliter la tâche.
  • Sprite Creator vous permet quant à lui de créer à l’aide de votre souris la “zone visible”, une fois cette zone définie à la volée, le CSS est généré comprenant ses données de positionnement ainsi que sa taille. Pratique !
  • Stitches est incontestablement l’outil le plus complet de cette sélection. Il vous permettra de faire au moins autant que Sprite Generator et Sprite Creator, le tout par simple drag and drop sur une interface intuitive, et en HTML5 s’il-vous-plait !

Configurer un sprite CSS

Nous allons prendre pour exemple les icônes sociaux se trouvant en pied de page (footer) du site de Netmacom qui utilise bien évidemment cette technique.

Icones sociaux Netmacom
Scructure HTML icones sociaux Netmacom
D’un point de vue structurel, vous ne serez pas dépaysés car la structure ne change quasiment pas. Tout se joue au niveau du CSS. Chaque icône se trouve dans une balise (dans notre cas un lien) disposant d’un id bien spécifique. Cet id contient les propriétés CSS propres au positionnement de la zone visible dans le sprite CSS. Une position par id, donc une position par image !

Et voici le CSS associé :

 

Comprendre ce CSS

Ce cas illustre parfaitement bien l’utilisation la plus courante du sprite CSS. On se sert du sélecteur #footer2Social a pour appliquer les propriétés communes qu’auront tous les liens se trouvant dans leur parent commun.

On trouve dans ce parent la propriété background-image qui contient le lien du sprite. Ainsi qu’un display:block; transformant le lien qui est un élément inline en élément block. Cette transformation a pour but de définir une dimension à l’aide de width et height à cet élément, représentant ainsi la partie visible.

Ensuite on appelle chaque lien à l’aide de leur identifiant (ex: #footer2Twitter) en leur appliquant un background-position. Le premier nombre numérique représente l’axe des X, le second l’axe des Y. Ils peuvent êtres aussi bien positifs que négatifs, tout dépend de la position de vos images sur votre sprite.

On réalise un doublon en rajoutant cette fois la pseudo-class :hover à la suite de chaque identifiant. Ceci aura pour conséquence de rendre “actif” uniquement au survol les propriétés CSS que contiennent ces sélecteurs.
On a plus qu’à changer les valeurs de background-position (dans notre cas il ne s’agit que de l’axe Y).

Note : #footer2FaceBook n’est pas défini explicitement dans le CSS, c’est normal. La position du background est attribuée nativement par les navigateurs dans le cas où on ne spécifie pas de position, par défaut il s’agit de (0, 0). #footer2FaceBook a donc logiquement hérité du positionnement implicite de #footer2Social a !

Les sprites CSS : une utilisation courante

Le Sprite CSS est très répandu comme l’atteste notre sélection, qui regroupe les plateformes web les plus fréquentées sur la toile :

Les sprites ont notamment été utilisés lors de notre intégration des maquettes de la boutique Numericable.

Sprite CSS - Boutique Numericable

Conclusion

Pour terminer sur cet article qui rendra vos pages web plus rapides à se charger, voici une liste des avantages et des inconvénients à utiliser cette technique :

Points positifs

  • Utiliser les sprites est incontournable pour les personnes qui souhaitent se lancer dans l’optimisation/performance de leur site Internet. En utilisant les sprites, on réduira le nombre de requêtes serveur.
  • Adieu le JavaScript, le couple img.src="monimage.gif"; (préchargement des images) + onmouseover (l’effet de survol) n’avait qu’à bien se tenir !
  • Cette technique est dite “naturelle” car elle fait appel au (X)HTML et au CSS. Votre code mieux présenté, mieux structuré et plus accessible gagnera également en visibilité. On y retrouve tous les avantages d’une bonne pratique d’intégration web répondant au standard W3C.

Points négatifs

  • Au final, la tâche est loin d’être agréable, elle nécessite une certaine minutie pour déplacer vos zones visibles avec la propriété background-position, elle sollicitera également votre patience car les positions seront nombreuses.
  • La technique des sprites CSS n’est utile que pour des images à but décoratif, pour les images porteuses d’information (ex : article), il faut impérativement utiliser la bonne vielle balise <img alt="" /> car elle contient un attribut très important pour l’accessibilité, à savoir alt.
  • La quête de performances oblige certains webdesigners à pousser à l’extrême leur optimisation. Ils regroupent en une seule image l’intégralité de leurs images décoratives, et certaines structures rendent cette tâche très difficile. Car autant comprendre le fonctionnement du sprite CSS et l’employer dans les circonstances les plus courantes est relativement facile, autant il est difficile de trouver une solution dans certains cas particuliers car cette technique reste malheureusement limitée (ex: gestion d’un contenu textuel à hauteur variable avec icône en sprite en tant que “lettrine”).

Et vous, utilisez-vous les sprites CSS ?

Réduire ses requêtes HTTP avec les Sprites, 5.0 out of 5 based on 5 ratings

Réagissez à cet article

Données obligatoires