Comment faire des sprites en CSS facilement ?

Blog du Freelance > Les sprites en CSS expliqués

Les sprites en CSS expliqués

Conseils et astuces pour l'optimisation de votre site

Posté le 21 septembre 2015 | Rangé dans Tutoriaux

Comment faire des sprites en CSS facilement ?

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

Les avantages des sprites CSS

- 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.

Les inconvénients de faire du sprite CSS

- 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)

Mais comment ça fonctionne exactement ?

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 :

Création d'un sprite en CSS

La préparation d'un sprite CSS

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 :

Exemple de grille pour la création d'un sprite css

Cette grille de 50x50 sera également plus facile à utiliser lors de la création du CSS associé.

Le remplissage de votre fichier sprite

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.

problème de grille pour le sprite

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.

L'utilisation en CSS de votre fichier sprite

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.

Exemple de CSS en lien avec un sprite

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...)

A propos de l'auteur

jacques Danilo, blogueur et freelance

Jacques Danilo
www.pixelcrea.com

Graphiste indépendant depuis 11 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :

Contactez-moi

Sur le blog du freelance

Vendez vos produits e-commerce sur votre page pro Facebook
oui

Vendez plus facilement avec Facebook

Depuis 2015, Facebook propose pour les professionnels une visibilité de leur boutique e-commerce directement sur le numéro 1 des réseaux sociaux. Plutôt ...

Réaliser des campagnes de remarketing avec AdWords
oui

Le remarketing avec Google AdWords

    Le remarketing consiste à cibler des campagnes publicitaires pour des internautes ayant déjà visités le site Internet de l’entreprise (ou ...

Boostez votre ventes en optimisant votre tunnel d'achat
oui

Optimiser le tunnel d'achat

Lors d’un passage de commande sur votre site marchand, il est possible d’avoir des abandons de paniers tout au long de votre tunnel de commande (ou tunnel d’achat, ou ...

SEO : Vendez à l'aide des similar-items de Google Images
oui

Similar Items avec Google Images

A l'heure actuelle, cette fonctionnalité n'est disponible que sur les smartphones, tablettes et applications Google sur Android, mais devrait s'étendre dans les prochains mois ...

SEO : Améliorez son référencement local
oui

SEO local : les clefs du succès

Dans de nombreux cas, la zone de chalandise de votre entreprise s’étend sur quelques dizaines de kilomètres : que vous soyez une boulangerie, un coiffeur, un ...

Partagez cet article sur les réseaux sociaux

Les commentaires

Il n'y a pas encore de commentaires, soyez le premier à réagir
Laissez un commentaire

Laissez un commentaire








* Champs obligatoires

» Retour au blog du freelance