On a récemment vu comment alléger ses PNG, aujourd’hui, voici une autre technique populaire pour faire gagner un temps de chargement considérable à son site: utiliser des sprites.

A part une boisson sucrée, c’est quoi un sprite?

On pourrait définir les sprites comme étant des agglomérations d’images dans un seul fichier. Imaginez que sur votre site, au lieu d’avoir une icône RRS, une autre pour Twitter, pour Facebook, pour Youtube et une dernière pour Flickr, vous rassembliez ces cinq images dans un seul fichier. En utilisant la propriété “Background-position” en CSS, vous pourrez ainsi vous servir d’un seul et même fichier image pour vos 5 icône différentes.

Quel intérêt?

1) Le gain de place et du temps de chargement.

Faîtes le test: cinq icônes de 44px x 44px pèsent plus lourd qu’une image de 220px x 44px. Ceci est dû au fait qu’en plus des information pures et dures de l’image, un fichier contient des métadonnées qui sont identiques (donc dans ce cas inutiles) à chaque image.

A cela j’ajoute que chaque ouverture de page nécessite cinq fois plus de requêtes HTTP pour l’ouverture des mêmes images… Et un serveur qui travaille plus, c’est un serveur plus lent. Un facteur important à prendre en compte si l’on s’occupe d’un site à fort trafic.

Il n’y a qu’à regarder ces quelques exemples pour s’en rendre compte…

2) Un pré chargement des images masquées.

Si l’on utilise des images comme boutons, on peut jouer avec les états :hover et :active pour rendre l’expérience utilisateur plus agréable. Petit souci: si on utilise des images, elles ne vont se charger uniquement que lorsqu’elle seront “demandées” par le browser. Ce qui va entraîner un très court léger temps mort au premier chargement des images. Pas joli joli, vous en conviendrez.

En utilisant un sprite, je vais tricher et “pré-charger” mes images :hover et :active mais je vais simplement les masquer. En passant dessus ou au clic, elles n’auront pas besoin de se charger et apparaitront donc instantanément.
C’est la méthode que j’ai utilisée pour le blog de mon voyage au Japon avec les icônes sociale ci-dessus.

La première ligne comprend les images telles qu’elles sont dans ma sidebar. La deuxième ligne est le statut :hover, mes images sont plus claires. Et enfin, la dernière ligne, statut :active, j’utilise simplement un bouton enfoncé, comme on l’avait vu dans cet article afin de donner un effet de réalisme au clic. (cette dernière étape aurait pu en fait être réalisée simplement en CSS, mais jouons le jeu…)

Ici je n’ai que la partie des icônes, en réalité j’ai utilisé un sprite pour la quasi totalité des images du blog. Voyez à quoi ça ressemble en cliquant ici.

Un peu de technique maintenant

Voir ces images interminables peuvent faire un peu peur au début. Pas de panique, il n’y a pas de technique spéciale ni de formules savantes. Il suffit juste de savoir compter, d’être un peu organisé et logique!

Il existe de nombreux services permettant de générer ses sprites. En ce qui me concerne je préfère assembler mes images seul sur Photoshop, mais c’est personnel.

Si je reprend mes icônes sociales, voici à quoi cela ressemble en HTML:

<ul id="social">
     <li><a href="http://japon.loriskumo.com/feed/" id="RSS"></a></li>
     <li><a href="http://www.facebook.com/comme.un.nuage.au.japon" id="Facebook"></a></li>
     <li><a href="http://twitter.com/loriskumo" id="Twitter"></a></li>
     <li><a href="http://www.flickr.com/photos/loriskumo/collections/72157624946729200/" id="Flickr"></a></li>
     <li><a href="http://www.youtube.com/loriskumo" id="YouTube"></a></li>
</ul>

Ici, rien de compliqué, chaque bouton a un ID différent.

La CSS est un peu plus complexe puisque l’on doit être attentifs à la position exacte de chaque partie de l’image que l’on souhaite afficher.


#RSS{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) 0 0px;
display: block;
}
#RSS:hover{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) 0 -44px;
display: block;
}
#RSS:active{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) 0 -88px;
display: block;
}

#Facebook{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) -44px 0px;
display: block;
}
#Facebook:hover{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) -44px -44px;
display: block;
}
#Facebook:active{
width: 44px;
height: 44px;
background: url(img/sprite-social.png) -44px -88px;
display: block;
}

etc...

La partie vicieuse, vous l’aurez compris, c’est la propriété “background”. En sachant que l’origine est le coin haut gauche, il suffit de calculer la distance dont on se trouve de ce point pour avoir la position exacte de notre morceau d’image. Les browsers calculent étrangement de droite à gauche et de bas en haut, c’est pourquoi mes déclarations de positions en pixels sont négatives. Il ne faut donc pas oublier le “-” avant.

Voir la démo

En utilisant un sprite comme dans cet exemple, je gagne trois choses:

  1. Pas besoin de gérer 15 images différentes sur mon serveur. Une seule image contient tout ce qu’il me faut.
  2. Un total d’images moins lourdes et moins de requêtes HTTP.
  3. Les images masquées se chargent en background, on n’a donc pas de temps de chargement supplémentaire.

Il y a donc énormément d’avantages avec comme seul inconvénient d’être un peu attentif lors de la création du sprite. Pensez-y, vous avez tout à y gagner!