Conseils et astuces pour l'optimisation de votre site
Posté le 21 septembre 2015 | Rangé dans Tutoriaux
Les sprites permettent de regrouper toutes les images d'interface du site en une seule image, plus rapide à charger que les dizaines d'images qui vous servent dans l'interface même de votre site (logo, flèches suivant/précédent d'un slider jQuery, icones pour les réseaux sociaux, etc...). Lors du chargement du site, le navigateur demandera qu'une seule image, qui permettra d'optimiser la bande passante et donc le temps de chargement du site. Explications
- Optimisation du temps de chargement du site : vous ne chargez q'une seule image qui en contient plusieurs, on fait moins d'aller-retour avec le serveur.
- Le poids des images : toutes les images d'interface pèsent un peu, alors qu'un fichier sprite qui en contient plusieurs sera toujours moins lourde.
- la phase de préparation est assez complexe (mais je vais vous l'expliquer un peu plus bas)
- les modifications d'un sprite mal pensé devient très fastidieux.
- il faut être à l'aise avec le HTML et le CSS (un minimum)
Le sprite est un fichier image classique, au format jpg ou png (en fonction de si vous avez besoin d'avoir de la transparence ou non). Mais ce qui est important c'est ce qu'il contient, puisqu'on y mettra toutes les images dont vous avez besoin dans votre interface : logos, icones, réseaux sociaux, flèches pour un slider, etc... Le but est de réussir à intégrer tout ça dans un seul fichier comme l'exemple ci-dessous :
Pour concevoir un sprite CSS, vous devez analyser votre site web pour savoir de quoi vous aurez besoin : logo sous plusieurs aspects ou tailles ? Flèches ? Icones d'interface ? Réseaux sociaux ? Elements graphiques ? Le plus simple, surtout au début, est de tous les lister et de voir si certains éléments sont très grand (en hauteur ou en largeur), ce qui permettra de définir la largeur ou la hauteur de notre image sprite.png (le nom du fichier n'a pas d'importance).
Le travail en utilisant des grilles
Ce que je préfère quans je créer mes sprites pour mes clients ou pour mon site, est de travailler avec une grille. J'aime bien travailler avec une grille de 50px, c'est à dire des carrés de 50px x 50px :
Cette grille de 50x50 sera également plus facile à utiliser lors de la création du CSS associé.
Maintenant que vous avez défini les images à intégrer dans votre fichier sprite et que vous avez créer une grille adaptée, il suffit d'y ajouter les images sans qu'elles se touchent et en respectant un espace rectangulaire autour.
Dans cet exemple, en bas se trouvent 2 logos trop proches. Comme les images ou les zones CSS seront forcéments carrées, n'oubliez pas de laisser suffisamment d'espace entre chaque élément.
Ca y est, notre fichier est prêt. On y a mis tous les éléments qu'il faut pour notre interface et on aimerait remplacer toutes les images indépendantes par notre sprite.png. Pour cela, il faudra jouer avec les règles CSS. Avant on avait ceci :
<img src="fleche.png" alt="" title="" />
Il faudrait remplacer la balise image par ceci :
<div class="fleche"></div>
Et rajouter en CSS :
.fleche{
width:50px;
height:50px;
background:url(sprite.png);
background-position:-200px -150px;
}
Pour l'explication, on remplace l'image par une balise DIV que l'on appelera par une classe 'fleche'. Coté CSS, on définit la taille de cette boite en hauteur et en largeur en fonction de la taille de l'image que l'on avait avant (qui doit se trouver dans votre fichier sprite). On indique ensuite que l'on utilisera une image d'arrière-plan qui ne nomme sprite.png en spécifiant le background-position pour déplacer l'image d'arrière plan au bon endroit en partant du point en haut à gauche, le point de référence.
Maintenant il ne reste plus qu'à reproduire la même démarche pour chacune des images qui composent votre page/site... Et ça peut être long, mais les résultats seront meilleurs pour les utilisateurs, pour le temps de chargement de votre site et donc, indirectement, pour votre référencement naturel.
Si vous avez besoin d'exemples, recherchez 'sprite css' sur Google Images pour voir des centaines d'autres exemples (Google, Facebook, etc...)
Jacques Danilo
www.pixelcrea.com
Graphiste indépendant depuis 19 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :
Il n'y a pas encore de commentaires, soyez le premier à réagir
Laissez un commentaire