Introduction
L’une des erreurs de débutant consiste à créer 1 fichier pour 1 icône.
En effet ce n’est pas l’idéal puisque vous allez demander aux visiteurs d’aller chercher par exemple les icônes:
- facebook.png
- instagram.png
- pinterest.png
- twitter.png
Le problème ici c’est que le visiteur doit envoyer 4 requêtes au serveur pour recevoir 4 réponses.
Cela ne paraît rien, mais vous allez consommer de la bande passante inutilement et rallonger le temps de chargement du site.
Effet, premièrement un sprite est plus léger que des icônes enregistrées séparément.
Dans notre cas les 4 icônes (1 par fichier) pèsent au total 1191 octets après l’application de la compression sans perte.
En « sprite » les 4 icônes pèseront un total de 869 octets (toujours après une compression sans perte).
Soit une réduction d’environ 1/4 du poids.
Bien évidemment ici il y a que 322 octets en moins. Mais imaginez avec plus d’icônes et des icônes plus grandes comme du 32×32.
De plus il faut prendre en compte le temps qu’il faut aux visiteurs pour émettre la demande (requête) et recevoir la réponse (incluant le temps d’attente): plus il y as de fichiers plus le chargement complet du site sera long.
→ Une technique appelée couramment sprite (planche d’images) permet donc d’appeler plusieurs icônes placées dans un seul et même fichier. En compensation il faudra par conséquent jouer avec le code (HTML et CSS).
exemple d’un « sprite »:
Comment faire ?
Pour créer vos sprites vous pouvez utiliser un logiciel de traitement d’imagerie comme Photoshop (payant) ou Gimp (gratuit) et faire votre CCS à la main.
→ Ou sinon vous pouvez aussi utiliser des outils en ligne qui vous génèrent vos sprites et votre code CSS à partir des images que vous envoyez. Comme celui de toptal.
Ici le code fourni par le générateur est un exemple.
Vous pouvez l’alléger.
exemple:
span.ico{ background: url(‘../ress/sn.png’); background-repeat: no-repeat; display:inline-block; width:16px; height:16px; } span.ico.fb{ background-position: 0px 0px; } span.ico.tw{ background-position: -48px 0px; } span.ico.insta{ background-position: -16px 0px; } span.ico.pint{ background-position: -32px 0px; }
Conclusion:
L’utilisation des sprites permet de diminuer l’espace occupé sur le serveur et de diminuer le temps de chargement de la page en réduisant:
- le nombre de requêtes (nombre d’images)
- le poids total des icônes
- le temps de réponse (y compris temps de réponse).
Cependant ce n’est pas la méthode l’astuce la plus efficace mais elle reste intéressante !
