Les feuilles de sprites et CSS

Une pratique simple est pratique pour gérer vos icônes sur un site internet, l’utilisation de feuilles de sprites.
Déjà massivement utilisé dans le jeu vidéo, pour le web son utilisation peut-être aussi utilisé très facilement mis en place sans avoir à charger plusieurs images.

Comment faire une feuille de sprites ?

Une feuille de sprites est un document image, très souvent en PNG pour garder la transparence, elle regroupe plusieurs dessins, icônes …etc les uns a coté des autres de préférence de même taille, pour des questions de calculs qui peuvent compliquer la tache.

Un exemple avec cette feuille de sprites avec des icônes de réseaux sociaux un PNG de 500 px sur 100 px avec chaque icône qui fait 100 px sur 100 px.

Comment mettre en place les sprites en CSS ?

Il faut mettre en place un espace ou seul une des images sera visible, pour notre exemple une simple <div> de 100 px de large sur 100 px de haut.
Puis en CSS nous pouvons faire un appel au background-image puis au background-position pour appelé une seule image dans notre document, mais afficher des icônes différentes à divers endroits de la page.

Il faut aussi bien comprendre le background-position, en effet on peut lui affecter une valeur horizontale et verticale.
La valeur horizontale pousse donc le fond vers la droite, il nous faut donc dans l’exemple précédant lui affecter des valeurs négatives pour le pousser vers la gauche.

Une autre utilisation des sprites en webdesign

Son utilisation est principalement utilisée dans le jeu vidéo, pour les jeux en 2D, Mario, Sonic pour ne citer que les plus connus utilise des feuilles de sprites pour leurs animations.
Nous savons utiliser l’animation CSS, ainsi que le background-position donc il ne reste plus qu’à utiliser une feuille de sprites pour des animations plus complexes.
Pour l’exemple, j’ai utilisé une feuille de sprites sur PikPNG, et animé ça en CSS. Petite subtilité à connaitre lorsqu’on utilise les feuilles de sprites en animation CSS, il faut dans le timing de l’animation utilisé step-start ce qui vous donnera de l’image par image et pas d’effet de transition.