Créez facilement vos «CSS Sprites»

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 :

 

A chaque chargement de page, il va se passer ceci

passprite

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 :

La «sprite sheet», une seule image qui regroupe toutes les icones
La «sprite sheet», une seule image qui regroupe toutes les icônes

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 :

Au niveau du serveur, cela se traduit ainsi :

la page avec css sprite

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

CSS Sprite Generator Editor and Code

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/

 

 

 

 

 

 

 

Créez facilement vos «CSS Sprites»
Mot clé :                    

Laisser un commentaire

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

Merci de faire ce calcul pour valider votre commentaire *

Bear