Je ne suis pas sur que le titre soit très parlant (en particulier ni vous n’avez aucune idée de ce qu’est un css sprite) alors je vais vous donner un petit exemple.
supposons que vous décidiez de mettre sur votre site web des boutons de partage sur les réseaux sociaux. vous voulez que vos utilisateur puisse partager votre page sur Faceboook, Twitter, Googleplus, Linkedin ou par mail.
vous créez alors 5 jolies petites icônes que vous associez a vos liens
çà donne grosso modo ceci au niveau du code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>page sans css sprite</title> <style type="text/css"> .rs { height: 40px; width: 40px; background-repeat: no-repeat; display: block; text-indent:-9999px; /* Pour masquer le texte */ } .rs-facebook { background-image: url(icone_facebook.png); } .rs-googleplus { background-image: url(icone_googleplus.png); } .rs-linkedin { background-image: url(icone_linkedin.png); } .rs-mail { background-image: url(icone_mail.png); } .rs-twitter { background-image: url(icone_twitter.png); } </style> </head> <body> <a target="_blank" title="partager sur Twitter" href="https://twitter.com/share?url=urldemapage" class="rs rs-twitter">partager sur Twitter</a> <a target="_blank" title="partager sur Facebook" href="https://www.facebook.com/sharer.php?u=urldemapage"class="rs rs-facebook">Partager sur Facebook</a> <a target="_blank" title="partager sur Google +" href="https://plus.google.com/share?url=urldemapage"class="rs rs-googleplus">Partager sur Google plus</a> <a target="_blank" title="partager sur Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=urldemapage" class="rs rs-googleplus">partager sur Linkedin</a> <a target="_blank" title="partager sur Envoyer par mail" href="mailto:?subject=titredemapage&body=urldemapage" class="rs rs-mail">Partager par mail</a> </body> </html> |
A chaque chargement de page, il va se passer ceci
votre page va être appelé sur le serveur, ainsi que les 5 petites icônes : soit 5 appels serveur, ce qui prend des ressources serveur et augmente le temps de chargement de la page.
Les CSS Sprite pour optimiser l’accès au serveur(et accélérer le chargement de votre site)
le principe des css sprite, c’est de dire que si au lieu d’appeler 5 petites images, on en appelle qu’une seule on fait moins d’aller retour entre le serveur et le navigateur du client.
on crée donc une seule image qui contient les 5 images dont on a besoin ce qui donne ceci :
on utilise ensuite la propriété css «background-position» pour indiquer le positionnement de chacune des icônes dans l’image , ce qui donne ceci au niveau du code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style type="text/css"> .rs { background-image: url(spritesheet.png); height: 40px; width: 40px; background-repeat: no-repeat; display: block; text-indent:-9999px; /* Pour masquer le texte */ } .rs-facebook { background-position: -5px -5px; } .rs-googleplus { background-position: -55px -5px; } .rs-linkedin { background-position: -5px -55px; } .rs-mail { background-position: -55px -55px; } .rs-twitter { background-position: -105px -5px; } </style> </head> <body> <a target="_blank" title="partager sur Twitter" href="https://twitter.com/share?url=urldemapage" class="rs rs-twitter">partager sur Twitter</a> <a target="_blank" title="partager sur Facebook" href="https://www.facebook.com/sharer.php?u=urldemapage"class="rs rs-facebook">Partager sur Facebook</a> <a target="_blank" title="partager sur Google +" href="https://plus.google.com/share?url=urldemapage"class="rs rs-googleplus">Partager sur Google plus</a> <a target="_blank" title="partager sur Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=urldemapage" class="rs rs-googleplus">partager sur Linkedin</a> <a target="_blank" title="partager sur Envoyer par mail" href="mailto:?subject=titredemapage&body=urldemapage" class="rs rs-mail">Partager par mail</a> </body> </html> |
Au niveau du serveur, cela se traduit ainsi :
Il n’y a plus que deux appel au serveur, un pour la page, l’autre pour l’image. on économise donc des ressources serveur, du temps de calcul et on acélére le chargement de sa page.
vous me direz que par contre on charge un fichier plus gros,
je vous répondrait :
- qu’on ne le charge qu’une seule fois,
- qu’il va aller ensuite se stocker dans le cache du navigateur du visiteur.
- et que comme on parle d’icônes çà ne fait pas un si gros fichier à la fin
c’est donc très pratique pour faire gagner de la vitesse a son site en limitant le besoin de ressources serveur.
donc c’est super bien mais c’est quand même galère de devoir coller toutes les images, de trouver leur positionnement …
Le Un générateur de «CSS Sprite» pour se simplifier la vie…
L’excellent site Dan’s tools a créé un generateur de css sprite en ligne
Son fonctionnement est des plus simples :
- Vous glissez déposez toutes les icônes que vous souhaitez ajouter dans le sprite
- vous réglez vos paramètre (ou pas les paramètres par défaut sont très bien pour des icônes)
- vous cliquez sur «export»
- et vous récupérez en deux clics, la spritesheet et le code css associé
c’est un outil en ligne qu’on trouve à cette adresse : http://spritegen.website-performance.org/
