Le sprite rend plus rapide le CSS !

Partagez si vous aimez ->

Mais pourquoi utiliser les sprites CSS?

Combiner toutes les images qui participent à la charte graphique de votre site Web en une seule image utilisée en fond accélère le chargement de la page et vous évite de perdre des visiteurs. Voici une méthode qui va vous faciliter la vie dans la composition de vos sprites en CSS.

L’autre avantage des CSS sprites, grâce à leur apparente simplicité, est de permettre au débutant de commencer le développement Web par un bout, sans avoir à assimiler beaucoup de code, mais en lui offrant une occasion d’appréhender l’architecture de son site, avant d’aller plus loin…

Mais ce stratagème, qui va vous donner des résultats immédiatement perceptibles, réclame une bonne organisation, c’est ce qui rebute le plus grand nombre, et c’est surtout l’objectif de ce tutoriel qui n’abordera pas le code dans ses moindres détails. Je donnerai en fin d’article une liste de pages, et de sites Web où cet aspect de la question est déjà traité.

Nous verrons ici une mise en place d’un sprite pour l’ensemble des éléments graphiques visibles de votre site.

Préparer le terrain

Le but du jeu est de rassembler toutes les images de fond que votre feuille de style appelle au chargement d’une page, et les pictogrammes affichés à divers endroits sur cette page au moyen de la balise IMG.

Vous les verrez certainement dans un même dossier « images » de votre thème.

Ce sont des fichiers qui affichent soit des dégradés, soit des informations visuelles au visiteur, qui améliorent l’ergonomie du site en définissant le type de clic : loupe pour activer l’envoi d’une recherche, date de publication d’un article, etc.

Ces images sont disponibles sur la plupart des pages d’un site, et souvent à plusieurs reprises. Les combiner en une seule va diminuer les requêtes envoyées au serveur, sachant qu’il est plus rapide de charger une image de 20 Ko, que 10 images de 2 Ko.

A titre d’exemple, voici des images:

exemple d'un sprite vertical (image répétées sur x)

J’ai noté sur une capture d’écran les noms des images à côté de l’endroit où elles apparaissent.

Pour faire la même chose pour votre design, vous avez besoin :

  • 1) D’un éditeur d’images comme Photoshop,
  • 2) D’un logiciel de tableur comme Excel,
  • 3) D’un éditeur de texte pour modifier les CSS.

Passons à la pratique!

La première chose à faire est d’ouvrir toutes les images du thème dans cet éditeur d’images, et de les séparer en trois groupes. D’un côté, les images en hauteur, de l’autre celles qui sont plus larges que hautes ; les premières sont généralement répétées horizontalement, les secondes verticalement :

#wrap-wrapper {
background: url(images/wrap-background.png) left top repeat-x; // l’image se répète horizontalement.
}
#contentwrap {
background: url(images/contentwrap-background.png) left top repeat-y; // // l’image se répète verticalement.
}

Bien sûr, il conviendra de le vérifier dans votre feuille de style.

Que mettre dans le 3ème groupe ?

Le dernier groupe comprendra les images restantes et qui ne se répètent pas. On peut les utiliser indifféremment pour l’un ou l’autre sprite.

C’est très important de bien séparer les images, ou vos images se chevaucheront à l’affichage!

De même, il faut faire attention à commencer sa combinaison dans l’ordre inverse de l’affichage des images sur les pages, au risque de voir apparaître un sprite en entier pendant une fraction de seconde, ce qui est franchement laid.

Un navigateur, sous nos latitudes, affiche les éléments qui se trouvent dans le code en commençant en haut à gauche, et en finissant en bas à droite. Au-dessous de la Méditerranée, cela peut être différent ; ceux qui écrivent en arabe ou en hébreu devront veiller à procéder dans l’ordre inverse pour le sprite horizontal.

Une fois les images repérées, alignées dans l’ordre inverse de l’affichage, reporter leurs noms et dimensions dans le tableur (Excel par exemple) va nous faire gagner un temps précieux. On y aura une représentation arithmétique de notre sprite et rien ne sera plus facile et rapide alors d’additionner les hauteurs afin de connaître la hauteur totale de notre sprite.

Voici les dimensions de chaque image de mon sprite:

13 bullet 10 10 -353
11 comments 18 18 -278
9 folder 16 16 -262
15 nav-background 3 38 -403
16 nav-background-hover 1 38 -441
12 search 25 30 -335
1 sidebar-tab 3 38 top
14 star 16 16 -384
9 tag 16 16 -262
18 wrap-background 3 29 -508
2 twitter 32 32 -38
3 delicious 32 32 -70
4 facebook 32 32 -102
5 digg 32 32 -134
6 stumbleupon 32 32 -166
7 favorites 32 32 -198
8 more 32 32 -230

Nous nous en servirons ensuite, pour calculer précisément la zone à afficher pour obtenir l’affichage de l’image désirée, et seulement celle-ci !

#nav a.mainMenuParentBtnFocused{
// background: url(../images/nav-background-hover.png) top left repeat-x;
background: url(images/sprites.png) -441px left repeat-x;
color:#fff;
text-shadow: 0 1px 0 #000;
}

Explication sur la ligne 3

Le premier attribut concerne le chemin relatif de notre sprite, c’est-à-dire le dossier où il se trouve dans l’arborescence du serveur. Le second dit au navigateur à partir de quel endroit du sprite l’image doit s’afficher, puis si l’affichage se fait par la gauche (left) ou la droite (right). On code enfin la façon dont l’image doit se répéter, ici à l’infini dans un sens horizontal.

Dans notre exemple de sprite qui se présente verticalement, lorsque l’on a pris la précaution de mettre la première en bas, on peut arranger les autres dans n’importe quel ordre, mais il est préférable de les mettre à la suite au cas où il serait nécessaire d’éditer le fichier, un jour à venir…

Gérer les pictogrammes dans un sprite

On a quand même un problème pour les pictogrammes qui s’avèrent plutôt difficiles à organiser avec CSS. Ce que je vous propose, c’est de créer une image qui s’affichera par-dessus les morceaux du sprite, mais on ne la verra pas, car elle sera transparente :

<div class="postmeta"><img src="&lt;?php bloginfo('template_url'); ?&gt;/images/folder.png" alt="" /> Classé dans <!--?php if(get_the_tags()) { ?--> <img src="&lt;?php bloginfo('template_url'); ?&gt;/images/tag.png" alt="" /> <img src="&lt;?php bloginfo('template_url'); ?&gt;/images/comments.png" alt="" /> <!--?php comments_popup_link('Pas de commentaire &#187;', '1 Commentaire &#187;', '% Commentaires &#187;'); ?--></div>

devient dans le code PHP de la page :

<div class="postmeta">
<p class="folder">Classé dans:<!--?php if(get_the_tags()) { ?--></p>
<p class="tag"></p>

</div>

… et dans la feuille de style :

.postmeta p {
display: inline;
}
.postmeta p.folder:before {
border: none;
vertical-align: middle;
margin: 2px;
content: url(images/blank.png);
background: url(images/sprites.png) left -262px;
}
.postmeta p.tag:before {
border: none;
vertical-align: middle;
margin: 2px;
content: url(images/blank.png);
background: url(images/sprites.png) 16px -262px;
}
.postmeta p.comments:before {
border: none;
vertical-align: middle;
margin: 2px;
content: url(images/blank.png);
background: url(images/sprites.png) left -278px;
}

Conclusion

Maintenant que nous avons rassemblé 18 images dans une seule et diminué le nombre de requêtes serveur à deux (le sprite et l’image transparente), notre site web est bien plus rapide.

Il existe beaucoup d’autres applications avec les sprites, mais nous sommes déjà capables de comprendre pourquoi ce subterfuge est dénommé « lutin » en anglais. Comme les farfadets, comme des bulles d’une célèbre marque de soda, toutes les images collectées dans un même fichier apparaissent et disparaissent au gré du code CSS sur les pages de votre site.

Vous pouvez consulter ces sites, qui ont développé des aspects du code CSS en profondeur.

Sources

Partagez si vous aimez ->

Youcef

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons