Les Sprite CSS

Dans ce tutoriel consacré à l'utilisation des sprites CSS, je vais tenter de vous expliquez le plus clairement et simplement possible ce qu'est un sprite, comment on l'utilise, pourquoi, etc... le tout sans trop vous grillez les neurones tout en évitant la perte de cheveux excessive .

C'est quoi un sprite?
Un sprite en CSS est une image regroupant la plupart des images décorative d'un site. Généralement on utilise le format png pour laisser une transparence lors de son utilisation mais la c'est vous qui voyez ce qui vous arrange le plus comme format avec ou sans couleur de fond.

A quoi sert un sprite?
Lorsque l'on navigue sur un site, le navigateur envoie ce que l'on appel des requête HTTP (HyperText Transfer Protocol) pour afficher le contenu de la page. Pour chaque image affiché, une requête HTTP est envoyé au serveur. Si 20 images, 20 requêtes HTTP sont envoyés. C'est là qu'intervient la méthode css lié au sprite. Comme celui-ci contient toutes les images, c'est une seule requête qui est envoyé au serveur et qui dit moins de requêtes dit temps d'affichage plus rapide.

Exemple d'un sprite :
sprite
Ce sprite fait 107px de large sur 111px de haut.

A quoi ressemble le code css d'un sprite?
#monsprite{
height:54px;
width:55px;
background:url(sprite.png) -52px 0px no-repeat;
}
Décortiquons un peut ce code css.

widht et height correspondent au dimension de l'image que l'on veut afficher dans le sprite.
background: url(sprite.png) indique l'url de l'image de fond, autrement dit le sprite.
-52px 0px correspond à la position de l'image que l'on veut afficher dans le sprite. -52px sur l'axe X et 0px sur l'axe Y. C'est 2 chiffres correspondent en faite à l'utilisation d'un background-position.  

On peut donc écrire le code css ci-dessus de la façon suivante également :
#monsprite{
height:54px;
width:55px;
background:url(sprite.png)  no-repeat;
background-position : -52px 0px;
}
no-repeat indique que l'image ne doit pas être répété.

Pour info., l'exemple ci-dessus afficherai uniquement le "soleil".

C'est quoi l'axe X et l'axe Y?

Lorsque l'on utilise l'attribut repeat-x, cela signifie que l'on souhaite répéter l'image sélectionné horizontalement. A l'inverse, un repeat-y est utilisé pour répété une image verticalement.

On arrête un peut les "blabla" et on démontre par l'exemple (c'est souvent plus parlant ).

Soit le sprite suivant contenant 2 images :
sprite

Je veux afficher uniquement la partie rouge de façon répété horizontalement.

Le CSS :
#x{
width:300px;
height:46px;
background: url(spritex.png) 0px -57px repeat-x;
}
Le HTML :
<div id="x">repeat-x</div>
Le rendu:
repeat-x
Dans cet exemple, la hauteur de l'image rouge correspond exactement à la hauteur de mon div (46px). La longueur de mon div étant supérieure à la longueur de l'image rouge, on utilise alors un repeat-x pour répéter l'image de fond horizontalement.

Affichons maintenant la partie noir.

Le CSS :
#xbis{
width:300px;
height:46px;
border:1px solid black;
background: url(spritex.png) 0px 0px repeat-x;
}
Le HTML :
<div id="xbis">repeat-x</div>
Le rendu:
repeat-x
Pour l'image noir, c'est exactement la même explication que pour l'image rouge sauf que la position du background-position est différent.
L'image noir étant la première image du sprite, il est normal que sa position soit fixé à 0px 0px car elle est bien collé en haut à gauche du sprite (sprite sans bordure). Ensuite, c'est les dimensions données à l'image associé à repeat-x qui font le reste.

Comme je pense que c'est un peut "tordu" à comprendre, voici un jolie dessin explicatif .

fonctionnement d'un sprite css

Dans l'exemple ci-dessus, le sprite est représenté par un fond gris contenant 3 images carré de couleurs orange, rouge et bleu. On voit que le sprite en lui même (fond gris) mesure 15px de côté et que chaque image contenu dans le sprite mesure 5px de côté.

Supposons que l'on veuille afficher l'image rouge.
Axe X = -5px
Axe Y= -5px
Longueur de l'image rouge = 5px
Largeur de l'image rouge = 5px

On peut donc écrire le style css suivant :
#rouge{
width : 5px;
height : 5px;
background: url(mon-sprite.png) -5px -5px no-repeat;
}
Que se passerait t'il si la longueur du "width" était de 30 pixel et que l'on appliquait un repeat-x à la place d'un no-repeat?
C'est simple, on aurait alternance de rouge et de gris : 5px rouge » 10px de gris » 5px rouge » 10px de gris.
Pour obtenir uniquement la couleur rouge avec un repeat-x, il faudrait que chaque image du sprite soit superposé et de même longueur.
Que se passerait t'il si la largeur du "height" était de 30 pixel et que l'on appliquait un repeat-y à la place d'un no-repeat?
Exactement la même chose.
Pour obtenir uniquement la couleur rouge avec un repeat-y, il faudrait que chaque image du sprite soit les une à côté des autres et de même largeur.

On a vu au début du tutoriel comment utiliser un sprite avec l'utilisation d'un repeat-x (horizontalement), voyons maintenant comment répéter une image sur l'axe Y (verticalement).

Prenons comme exemple le sprite ci-dessous :
sprite
Ce sprite mesure 445px de long et 25px haut.

Pour afficher uniquement la partie bleu répété verticalement.
Le CSS :
#y{
height:300px;
width:220px;
border:1px solid black;
background: transparent url(spritey.png) 0px 0px repeat-y;
}
Le HTML :
<div id="y">repeat-y</div>
Le rendu :
repeat-y

Pour afficher la partie rose :

Le CSS :
#ybis{
height:300px;
width:220px;
border:1px solid black;
background: transparent url(spritey.png) -225px 0px repeat-y;
}
Le HTML :
<div id="ybis">repeat-y</div>
Le rendu :
repeat-y

On peut également créer des effets de rollover avec un sprite:
Le CSS :
#lien{
width:300px;
height:46px;
border:1px solid black;
background: transparent url(spritex.png) 0px -57px repeat-x;
}
#lien:hover{
background: transparent url(spritex.png) 0px 0px repeat-x;
}
Le HTML :
<div id="lien">hover+repeat-x</div>
Le rendu :
hover + repeat-x
Dans l'exemple ci-dessus, on change uniquement la position de l'image lors du survol de la cellule.

Prenons maintenant le sprite ci-dessous comme référence :
sprite
... et affichons chaque élément du sprite séparément :

Le CSS :

#note{
height:56px;
width:41px;
background:url(sprite.png) 0px 0px no-repeat;
}
#soleil{
height:54px;
width:55px;
background:url(sprite.png) -52px 0px no-repeat;
}
#fleche{
height:56px;
width:62px;
background:url(sprite.png) -45px -55px no-repeat;
}
#cle{
height:54px;
width:41px;
background:url(sprite.png) 0px -57px no-repeat;
}
Le HTML :
<div id="note"></div>
<div id="soleil"></div>
<div id="fleche"></div>
<div id="cle"></div>
Le rendu :
 
 
 
 

Toujours avec la même image, nous allons créer un simple menu à l'aide d'une liste de type non-ordonnée agrémenté d'un hover.

Le CSS :
#menu ul{
list-style-type : none;
}
#menu ul li{
height:56px;
width:41px;
background:url(sprite.png) 0px 0px no-repeat;
}
#menu ul li a {
display:block;
color : purple;
text-decoration : none;
line-height : 56px;
margin-left:41px;
}
#menu ul li:hover {
background:url(sprite.png) 0px -57px no-repeat;
}
Le HTML :
<div id="menu">
<ul>
  <li><a href="#">Lien</a></li>
  <li><a href="#">Lien</a></li>
  <li><a href="#">Lien</a></li>
</ul>
</div>
Le rendu :

Ce qu'il faut retenir en gros :
Un sprite permet de diminuer le nombre de requête HTTP (si beaucoup d'images) et donc d'augmenter la rapidité d'affichage de la page.
L'utilisation d'un sprite ce fait uniquement pour les images "décoratives".

On peut distinguer 3 sortes de sprite :
Sprite "normal" permettant d'afficher distinctement les images grâce à l'utilisation du no-repeat.
Sprite "horizontal" permettant la répétition de l'image sélectionné grâce à l'utilisation du repeat-x.
Sprite "vertical" permettant la répétition de l'image sélectionné grâce à l'utilisation du repeat-y.

Selon la disposition de vos images et les dimensions de celles-ci dans votre sprite, il est possible de "cumuler" l'utilisation du no-repeat et repeat-x ou repeat-y.

Prenons l'exemple du sprite de Google :
sprite google
On peut donc afficher indépendamment chaque élément du sprite (no-repeat) et également répéter horizontalement (repeat-x) l'image du haut et du bas puisqu'elle occupe la totalité de la longueur du sprite.

Pour un sprite utilisant des images sur l'axe X (répétition horizontal) :
Pour un sprite dont les éléments doivent se répéter horizontalement (repeat-x) , les images intégrées dans le sprite doivent être superposés, faire la même longueur et occuper la totalité de la largeur du sprite (pas d'espace vide à gauche et droite du sprite).

Pour un sprite utilisant des images sur l'axe Y (répétition vertical) :

Pour un sprite dont les éléments doivent se répéter verticalement (repeat-y), les images intégrés dans le sprite doivent être les une à côté des autres, faire la même hauteur et occuper la totalité de la hauteur du sprite (pas d'espace vide en haut et en bas du sprite).

Les inconvénients ..parce qu'il y en quand même !
Si l'on doit changer/modifier/supprimer une image dans le sprite, il faut être super pointilleux.
La feuille de style est beaucoup plus longue donc un peut plus lourde.
Le positionnement est assez complexe quand on doit jouer au pixel près car il faut calculer les dimensions des zones à afficher et leurs coordonnées précises dans l'élément du background-position.

Des outils pour aider.

Générateur de Sprites CSS
Cet outil vous permet d'automatiser le processus de génération des Sprites CSS. Fournissez seulement un fichier ZIP contenant au moins 2 images (GIF, PNG ou JPG) et il génère l'image Sprite ainsi que les règles CSS associées pour afficher unitairement chaque image composant le Sprite.

Sprite Creator
Cet outil vous permet de télécharger une image et de sélectionnez les zones de l'image afin de créer automatiquement le code css correspondant à votre sélection.
Voir/déposer un commentaire (0) | Signaler un problème