Le sprite rend plus rapide! [Article invité]

Le sprite rend plus rapide! [Article invité]

Cet article invité a été rédigé par Marie, qui gère un blog porno sur lequel elle a mis en place cette technique.

Vous n’êtes cependant pas obligé de le visiter pour vous rendre compte du résultat de cette astuce CSS, ou pour en voir les différents effets, car c’est totalement invisible à l’œil nu ! Tant pis pour vous si vous cherchiez une excuse pour y aller. 😉

Je laisse la parole à Marie:

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 sur le blog porno que j’administre, mais qui correspondent peu ou prou à tous les sites Web, y compris le vôtre !

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 mes images:

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

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

affichage des sprites par rapport au flux de la page

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.

Si des points vous semblent obscurs, n’hésitez pas à poser votre question au-dessous de cet article, en commentaire. Vous pouvez aussi consulter ces sites, qui ont développé des aspects du code CSS en profondeur.

Sources

tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

18 commentaires

  1. Intéressant de voir comment on utilise les techniques des jeux vidéos 2D d’antan pour du WEB, j’avais même réalisé un logiciel qui permet de créer des planches de sprite il y a de cela quelques années ( http://www.phelios.net/supersprites.html , pas sur qu’il marche sur windows 7-8 tellement c’est vieux )

    Répondre
    • Joli travail ! Il existe aussi des sites Web qui proposent d’exécuter un « sprite », mais ils ne m’ont pas parus faciles à utiliser. À vrai dire, ils ont codé la même procédure.

      Répondre
  2. Je ne savais pas que ce type de fonction existait, aujourd’hui il faut vraiment miser sur tout pour optimiser un site et ne rien laisser au hasard, c’est parfois des petits plus qui font la différence. Pour la capture d’écran je me suis bien marré.

    Répondre
  3. Encore un truc que je ne connaissais pas, merci :).
    Enfin si je connaissais, mais je ne savais pas comment cela se fait. Maintenant j’ai ce savoir :D.

    D’ailleurs ton article décrit vraiment tout en détail Marie, bravo. Il suffit de bien lire calmement et on comprend vraiment ce qu’est le Sprite ! (délicieuse boisson ^^ )

    Bonne soirée !

    Répondre
  4. Sympa comme technique, j’en avais déjà entendu parler mais la mise en place me paraît compliquée. Je vais quand même essayer. ^^

    Répondre
    • Ce n’est pas si compliqué, pourvu de s’organiser pour la mettre en pratique de façon méthodique.

      Répondre
  5. Utiliser des sprites diminue le nombre de requêtes serveur, mais est-ce que ca accélère vraiment l’affichage de la page pour les visiteurs? Charger 10 images en lançant 10 requêtes d’un coup doit quand même aller plus vite que charger une seule image 10 fois plus grosse, non? Je pose la question parce que beaucoup de sites font justement l’inverse: ils découpent leur grosses images en images plus petites, et j’ai toujours pensé que c’était pour accélérer le chargement des pages.

    Répondre
    • Bonjour Samuel,
      Oui je comprends ce que tu veux dire. En effet, charger 10 petites images est moins lourd que en charger 10 grosses et c’est pourquoi on coupe les grosses images en motif plus petit que l’on répète programmatiquement en CSS.

      Par contre, ces 10 images ne se chargent pas d’un coup, car on ne peut envoyer qu’une requête à la fois vers un même serveur. Elles sont donc chargées les uns après les autres.

      C’est pourquoi les rassembler sur un même fichier combine le meilleur des deux mondes: (petites images = gain de poids) + (une seule requête = gain de vitesse) = un site plus rapide

      CQFD 😉

      Répondre
      • Ah ok, merci pour l’explication, je me coucherai ce soir en en sachant (un petit peu) plus sur la technique (domaine où je suis assez ignorant il faut l’avouer ;( ).

  6. Très intéressant, je connaissais mais j’ai jamais trouvé de bonne méthodo pour y passer et me rassurer avant de me lancer dans le code. Là je pense qu’avec ça je vais pas tarder à m’y mettre.

    ++

    Répondre
  7. Cet article tombe à pic !! Je me pose tout de m^me une question. Pour le logo d’un iste, faut il le mettre dans une sprite avec par dessus une image transparente pour en faire un lien, ou vaut)il mieux avoir une image juste pour le logo?

    Répondre
  8. Google utilise effectivement un sprite en background pour afficher son logo dans les pages de résultats de recherches. Je n’ai pas fait cela, car je tenais à avoir un titre en texte dans une balise h1. J’ai préféré recouvrir le titre avec l’image du logo en utilisant les CSS z-index.

    Répondre
  9. Merci pour cette astuce que je ne connaissais pas du tout, je dormirai moins bête ce soir. Sinon à cause de l’image à la une j’étais un peu sonné en lisant l’article il m’a fallut du temps pour comprendre de quel Sprite ça parlait réellement lol

    Répondre
  10. Le Sprite est devenu une technique indispensable !

    D’ailleurs, pour aider les intégrateurs, je vous conseille d’utiliser le site spritecow.com

    Ce site permet de cibler un élément précis de votre sprite et il vous donne sa position, sa largeur et sa hauteur. Autant vous dire que le gain de temps est vraiment ENORME !

    Répondre
    • Merci pour l’info, cet outil semble en effet bien pratique!

      Répondre
  11. Super ce truc pour gagner de la place et de la vitesse de chargement. J’ai des pages ou se trouvent des dizaines de petits logos comme celui-ci et j’avoue que j’aimerais bien gagner un peu de vitesse. Je vais m’y essayer dés ce soir. ps : c’est la première fois que je vois un article invité d’un blog porno ! :)

    Répondre
    • ET oui on n’arrête pas le progrès^^

      Répondre
  12. Bonjour,

    Explication claire même si ça reste encore confus pour moi. J’y reviendrai plus tard.

    Répondre

Trackbacks/Pingbacks

  1. Les statistiques du blog en Octobre 2012 - Les Doigts dans le Net - [...] Marie: Le sprite rend plus rapide! [Article invité] [...]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint