Pourquoi utiliser les sprites CSS?

6 oct

Les sites web utilisent de plus en plus d’icons et images illustrant liens et actions, ou d’effets de transitions avec des images. Il fut un temps où l’utilisation des onmouseover/onmouseout était monnaie courante, mais aujourd’hui, une solution à la fois simple et rapide s’offre aux intégrateurs/développeurs et est basée uniquement sur du CSS : le sprite CSS.

Le sprite CSS?! C’est bien beau mais c’est quoi au juste???

Il s’agit en fait d’une technique permettant d’accélérer de façon drastique les chargements des images de votre site tout en gérant le tout directement via le CSS.

La technique est simple, et consiste à utiliser un seul et unique fichier pour stocker différentes images (les icons de votre site par exemple), en les plaçant de façon uniforme les unes à côté des autres. Ensuite, ces images seront appelées via votre CSS et telle ou telle image sera placée sur votre page via la propriété background-position.

Quels sont les avantages de cette technique?

Les avantages sont multiples : d’une, en terme de performances, votre navigateur n’aura à charger qu’une seule et unique et image (grande certes  mais il ne faut pas oublier que pour des fichiers, la somme de la taille de toutes les images est supérieure à la taille de l’image utilisée dans le CSS). D’autre part, plus besoin de JS pour changer d’image au survol d’un élément, un simple « :hover » étant suffisant.

Quand utiliser les Sprites CSS?

Si votre site ou blog n’a quasiment aucun trafic, ou n’utilise que quelques images, inutile de s’embêter avec les sprites CSS. En revanche, pour les applications à fort trafic  cette techniquement peut être bénéfique, à la fois pour l’utilisateur (temps de chargement meilleurs) et pour le client/hébergeur (moins de bande passante utilisée).

Des sites comme Google, Twitter, Amazon ou Dailymotion utilisent cette technique pour toutes ces raisons.

http://www.google.fr/images/nav_logo114.png

Comment créer un sprite CSS?

Huw…. là, ça se complique… vous pouvez toujours essayer de générer un fichier à la main, avec votre petit Photoshop par exemple… mais il faut veiller à garder la même zone allouée pour chaque image dans le fichier, puis générer le fichier CSS, avec une classe pour chaque image… c’est long !!

Heureusement, il existe différents outils et sites vous simplifiant la vie, comme le site CSS Sprite Generator.

Des inconvénients?

Oui, il en faut bien :) Si vous voulez changer une image, il faut re-générer le sprite CSS. Pis encore, si vous changez la taille d’une des images, ça se complique encore d’avantage :( Heureusement, CSS Sprite Generator vous aide, encore une fois.

2 Responses to “Pourquoi utiliser les sprites CSS?”

  1. Cyril 07. oct, 2012 at 20 h 24 min #

    À noter que cette technique vient d’une limitation du protocole HTTP 1.x : il ne permet pas de faire du téléchargement asynchrone. Ce qui oblige un navigateur a téléchargé en 1 à 4 ressources à la fois (pas plus) : ce qui ralentie pas mal le temps de chargement d’un site : une ressource en téléchargement puis une fois finie, une autre ressource puis une ressource puis une ressource … et à chaque fois, résolution DNS, réception du serveur, réponse du serveur. Cette technique permet de concentrer les images dans une seule requête HTTP.

    À l’avenir, avec le protocole HTTP 2, lorsqu’il sera vraiment implémenté, on pourra plus ou moins oublier cette technique, car le protocole permettra le téléchargement asynchrone (multiplexé) ce qui donnera une ressource, puis une ressource en téléchargement en même temps, et une autre aussi, etc.

    • Aurélien Pegny 07. oct, 2012 at 20 h 28 min #

      Merci pour ces précisions ;)

Leave a Reply

*