Tutoriel : utiliser les CSS Sprites

Faire de beaux sites, ce n’est pas facile mais faire de beaux sites qui s’affichent correctement et rapidement sur les navigateurs des internautes, c’est encore plus compliqué. Malgré la démocratisation de l’ADSL et de la fibre optique, il est primordial de faire en sorte d’optimiser le plus possible ses sites. Et justement, en la matière, les CSS Sprites vont vous permettre de réduire considérablement le temps d’affichage des pages de vos sites internet et autres blogs divers et variés. Si vous ne les connaissez pas, c’est ici que ça se passe.

Pourquoi optimiser son site ?

Comme je l’ai mentionné dans l’introduction de ce billet, le temps du 56k est désormais révolu. Même s’il existe encore et toujours des irréductibles, le câble et l’ADSL se sont considérablement démocratisés ces dernières années et ce n’est encore que le début puisque la fibre optique commence à faire son apparition dans les grandes villes, notamment Paris.

Oui, mais il y a un autre point à prendre en considération lorsqu’on décide de créer et de lancer son site ou son blog : l’hébergement de ce dernier. Globalement, et sans trop rentrer dans les détails, vous pouvez opter pour deux types de solution : le serveur dédié (ou virtualisé, je le compte dedans aussi) ou le mutualisé. Si dans le premier cas votre site sera hébergé sur une machine à part entière, et pourra donc allégrement puiser dans les ressources de cette dernière, ce n’est pas le cas du mutualisé. En effet, comme son nom l’indique, un serveur configuré en mutualisé héberge plusieurs sites différents et réparti donc ses ressources entre ces derniers. Autant vous dire que, dans ce contexte, vous devez faire en sorte d’optimiser au maximum vos pages. Si vous ne le faites pas, alors vous risquez de déclencher des alertes (lorsque vous consommez trop de ressources). Pour vous donner là encore un exemple concret, OVH gère très finement ces alertes. Si vous dépassez 150 alertes CPU en une journée, alors votre compte est tout bonnement suspendu.

Si cela peut ennuyer le particulier, cela peut également coûter très cher au professionnel. Un site hors ligne durant plusieurs jours, ce n’est pas vendeur. Sans compter que si votre site est suspendu, alors les robots des moteurs de recherche ne vous trouveront plus et cela pourra par conséquent pénaliser votre référencement.

On peut également ajouter à cela le fait que tous les internautes n’ont pas forcément accès au haut débit. Dans ce contexte, vous comprendrez sans doute pourquoi il est primordial de bien optimiser ses pages. Et en la matière, même si l’on ne peut se contenter des CSS Sprites, le fait est que cette technique vous permettra de réduire considérablement l’affichage de vos pages.

Les CSS Sprites, le principe

Un site internet est presque toujours constitué d’images situées en arrière plan. Si nous prenons l’exemple de Weedle, il faut savoir que mon thème compte 36 images de fond, situées aussi bien dans l’entête du blog que dans la colonne latérale que dans son pied de page. Lorsque vous venez ici, le serveur doit donc renvoyer 36 images bien distinctes, ce qui fait 36 requêtes HTTP. Même si vos images sont correctement optimisées, il n’empêche que ce point entraîne une consommation importante de ressources. 36 images de petite taille sont plus « lourdes » à gérer qu’une seule grosse image.

Et justement, c’est le principe même des CSS Sprites. Au lieu d’avoir plusieurs images à gauche et à droite, vous allez toutes les regrouper dans une seule et même image. Ensuite, dans vos CSS, il suffira d’utiliser la propriété « background-position » pour les appeler. Bien évidemment, la technique n’est pas facile puisque vous êtes censés calculer la position de chacune de vos images sur cette fameuse grille. En cas d’erreur, c’est donc la mauvaise image qui pourrait être appelées.

A ce stade de l’article, vous devez sans doute vous dire que cette technique est trop compliquée, qu’elle doit prendre trop de temps à mettre en place et vous êtes même peut-être sur le point de passer à autre chose. Surtout, ne partez pas, parce que nous allons justement voir qu’il existe des outils et des astuces pour simplifier considérablement la mise en place des CSS Sprites.

Les CSS Sprites, les préparatifs

Concrètement, il existe deux moyens de mettre en place des CSS Sprites sur son site ou son blog : le faire à la main et risquer de devenir complètement fou à force de calculer la position des éléments ou bien utiliser un outil qui va faire une partie du travail à votre place. Attention cependant car même en utilisant ce type d’outils, vous devrez utiliser ce que vous avez entre vos deux oreilles et maîtriser un minimum les CSS.

Dans un premier temps, il suffit de créer son thème comme d’habitude, et donc de concevoir sa charte sur un logiciel dédié (Gimp ou Photoshop) puis de la découper comme s’il s’agissait de réaliser une intégration standard. Une fois vos images découpées, on les intègre comme d’habitude. Là, deux solutions s’offrent à vous :

1. Positionner chaque élément de manière traditionnelle en utilisant la propriété « background » renvoyant sur les images adaptées.
2. Passer directement à la phase des CSS Sprites.

Là, en toute franchise, je vous recommande la première solution. Cela vous prendra un peu plus de temps, certes, mais cela vous permettra également de corriger pas mal de bugs et de partir sur un document propre. Bien sûr, vous serez peut-être tenté de sauter cette étape mais sachez que vous risquez de passer beaucoup plus de temps à corriger ce qui n’ira pas qu’à bien préparer vos CSS.

Les CSS Sprites, la mise en place

Une fois que votre document est prêt et que votre charte est correctement découpée, vous allez pouvoir passer aux choses sérieuses. Pour générer nos CSS Sprites, nous allons passer par un service dédié : http://spritegen.website-performance.org. Il en existe beaucoup d’autres, c’est un fait, mais c’est ce dernier que j’utilise le plus souvent dans le cadre de mes projets personnels et professionnels.

Pour générer les CSS Sprites, il suffit donc de suivre les étapes suivantes :

1. Compressez toutes vos images dans un fichier ZIP. Ce dernier ne doit pas excéder 0,5MB.
2. Rendez-vous sur http://spritegen.website-performance.org et sélectionnez votre fichier zippé en utilisant le bouton « parcourir ».
3. Au niveau des réglages, contentez-vous des suivants :
   • Cochez « Ignore duplicate images ».
   • Laissez 100% en « width » et en « height ».
   • Cochez « Maintain aspect ratio ».
   • Choisissez l’alignement horizontal (indispensable si vous avez des images de fond que vous répétez sur un axe).
   • Cochez « Wrap columns to fix Opera bug ».
   • Choisissez ensuite le format de votre choix ainsi que le niveau de couleurs.
   • Indiquez les préfixes de votre choix.
   • Validez en cliquant sur le bouton adéquat.

Après quelques secondes de chargement, le service va vous renvoyer plusieurs informations à l’écran. Grâce à elles, vous allez pouvoir intégrer facilement les CSS Sprites à vos CSS.

Pour intégrer les CSS Sprites, il suffit donc de suivre les étapes suivantes :

1. Commencez par télécharger l’image générée en cliquant sur le bouton adéquat.
2. Dans votre feuille de style, créez une classe qui intègrera cette image en background (exemple : « .sprite_global {background :url(img/sprite.png) no-repeat top left;} »).
3. Copiez / collez tous les « background-position » dans leurs classes respectives.
4. Dans votre fichier HTML / PHP / ASP, ajoutez la classe générale créée lors de l’étape 2 aux éléments concernés (exemple : « class= »sprite_global »).
5. Enregistrez vos différents fichiers, le tour est joué.

A noter que je vous recommande de vérifier le résultat de vos modifications au fur et à mesure afin d’être certain que toutes vos images de fond s’affichent bel et bien sur les pages de votre site ou de votre blog. On notera au passage que pour répéter une image de fond sur un axe, il est indispensable d’ajouter la propriété « background-repeat : repeat-x » (ou repeat-y selon l’axe souhaité). Cela dit, comme indiqué un peu plus haut, cela ne fonctionnera que si vous avez opté pour l’alignement horizontal au moment de générer votre image principale.

Et finalement

Pour en terminer avec cet article, on rajoutera simplement que le travail d’optimisation de son site ne s’arrête pas à l’utilisation des CSS Sprites. Ces derniers amélioreront considérablement les choses mais ils n’ont rien de miraculeux non plus. Plus tard, je publierai un article sur d’autres méthodes d’optimisation.