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

Découverte de l'outil de tracking Google Analytics
oui

Les bases de Google Analytics 2018

Pour vérifier l’efficacité de votre site internet, ou de mesurer des informations pertinentes lors de vos actions en webmarketing, l’outil indispensable de ...

Découverte de l'administration de Wordpress
oui

L'administration de Wordpress

Dans ce tutoriel destiné aux débutants, je vais vous présenter l’interface d’administration de Wordpress. Il s’agit ici d’une découverte ...

Optimisez le SEO de vos fiches produits sur Prestashop 1.7
oui

Fiches produits : le SEO dans Prestashop 1.7

Mettez toutes les chances de votre coté en adoptant les bons réflexes SEO lorsque vous ajoutez un produit sur Prestashop 1.7. Etape par étape, nous allons ...

16 moyens d'obtenir des backlinks pour 2018
oui

SEO : 16 techniques pour vos backlinks pour 2018

Le référencement naturel (optimisation SEO) va de pair avec l’obtention de backlinks. Il s’agit de liens pointant vers une page de notre site Internet. C’est ...

Comment bien référencer vos images sur votre site Internet ?
oui

Les images et le SEO

Les images ont une place importante dans la stratégie SEO de votre entreprise : elles permettent de gagner en visibilité grâce à Google Images et de gagner ...

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