Scroll to Top

CSS Sprites pour optimiser son site

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 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.

prites

Pourquoi optimiser son site ?

 Le temps de l’ADSL est désormais révolu. Même s’il existe encore et toujours des irréductibles, la fibre optique s’est considérablement démocratisé ces dernières années et ce n’est encore que le début.

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 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.

 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 simplement suspendu.

Cela peut vous coûter très cher ! 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 à la fibre optique.

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  Sprites, le fait est que cette technique vous permettra de réduire considérablement l’affichage de vos pages.

Les  Sprites, le principe

Un site internet est presque toujours constitué d’images situées en arrière plan. . Même si vos images sont correctement optimisées, il n’empêche que ce point entraîne une consommation importante de ressources. les images de petite taille sont plus « lourdes » à gérer qu’une seule grosse image.

Et justement, c’est le principe même des  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 , 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.

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.

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…

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 qu’il faut 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.  Prochain article : méthodes d’optimisation.

Like it? Share it!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>