download close

Les Sprites

#1 Un sprite, qu'est-ce que c'est ? open

Un sprite c'est une image. Cette image est particulière car elle contient d'autres images de même taille. Ces images sont disposées en lignes et/ou en colonnes et forment une sorte de grille d'images.

Vous avez deux exemples ci-dessous :

Un exemple de sprite
Un premier, constitué d'une colonne de quatre images de 120px par 50px.
Un autre exemple de sprite
Un second, constitué de trois colonnes et cinq lignes d'images de 150px par 98px.

#2 Un sprite, comment ça marche ? open

Le sprite est déposé dans le fond d'un conteneur, qui a la taille d'une seule image constituant le sprite.

Le conteneur agit comme une fenêtre transparente, à travers laquelle, on peut voir une seule image du sprite déposée dans le fond.

Le reste du sprite qui déborde du conteneur est caché et ne nous gêne pas.

L'idée, c'est de pouvoir choisir au sein du sprite l'image qui nous intéresse, et pour cela, on va déplacer la position du sprite dans le fond de son conteneur.

Principe de fonctionnement du sprite
Principe de fonctionnement du sprite.

#3 Un sprite pour faire un rollover open

La première application du sprite, c'est proposer un effet visuel lorsque le curseur de votre souris survole un lien. On appelle cet effet un rollover.

Pour faire ça, on va se servir du CSS et des pseudo-classes, associées aux différents états d'un lien. Pour chaque état qui nous intéresse, on va choisir une image en déplaçant le sprite au moyen de la propriété background-position.

J'attire votre attention, sur le fait qu'il est nécessaire de mettre un contenu textuel, entre les balises du lien. Sans cela, les synthétiseurs vocaux ne comprendront rien.

Toutefois, ce texte est visuellement gênant, car il recouvre l'image de fond. Il faut le cibler au moyen d'un élément span pour pouvoir le faire disparaître par un moyen CSS approprié.

Je décris ici les étapes du travail CSS nécessaire à la préparation d'un lien :

  1. On met le lien en display:inline-block; pour pouvoir lui donner des dimensions.
  2. On lui donne la taille d'une seule image du sprite.
  3. On glisse le sprite dans le fond de son conteneur qui est en fait la partie cliquable du lien.
  4. On choisit une première image qui sera utilisée lorsque le lien n'est pas survolé.
  5. On utilise ensuite les pseudo-classes :hover et :active pour cibler ces deux états du lien. On décale les images à l'aide de la propriété background-position. Les décalages ont des valeurs négatives, car il faut décaler les images vers la gauche ou/et vers le haut.

Exemple : Utilisation d'un sprite pour faire un rollover

L'intérêt ici est d'éviter d'utiliser le JavaScript.

#4 Un sprite comme collection d'images open

La deuxième application du sprite, c'est de pouvoir choisir une seule image encapsulée dans la collection d'images que constitue le sprite.

Ci-dessous, je fais un exemple dans lequel l'utilisateur peut choisir un mode de paiement.

Le HTML est fait d'un formulaire qui contient trois radio boutons. Les labels sont placés en display:inline-block;pour être dimensionnés. Dans leurs fonds on place un sprite.

Exemple : Utilisation d'un sprite comme collection d'images

L'intérêt d'utiliser un sprite ici réside dans le fait, qu'une seule requête serveur permet de charger toutes les images. Il y a un intérêt aussi au niveau du poids des images. Une seule image en qualité jpeg de 80 pèse 6.1 ko. La totalité des 15 images pèse 72 ko soit 4.8 ko par image.

Ci-dessous, j'ai récupéré ce sprite d'icônes utilisé dans Jquery UI. Une seule icône pèserait 244 octets alors que le sprite de 80 images pèse 5.5ko soit environ 57 octets par image. On bénéficie dans ce cas, d'une sorte de factorisation de la table des couleurs qui est identique pour toutes les images.

Sprite utilisé dans Jquery UI
Sprite utilisé dans Jquery UI