Créer et utiliser un fichier "spritesheet"

Un "spritesheet" est un fichier unique comprenant plusieurs images positionnées les unes à côté des autres.
Pour afficher l’une des images du fichier "spritesheet" il suffit d’utiliser HTML & CSS et en particulier la propriété background-position.
On peut traduire "spritesheet" en feuille de sprites ou encore grille d'images.

Intérêt de cette technologie

Mais quel peut-être l'intérêt des grilles d'images ?
Le procédé réduit considérablement le nombre de requête HTPP.
Les feuilles de sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue sensiblement.

Création d'une grille d'images

Utilisez une application en ligne

Sachez qu'il existe des générateurs de "spritesheets".
Le problème de ces applications en ligne c'est que les images n'ont pas forcément toutes les mêmes dimensions et le positionnement n'est pas très satisfaisant.
L'utilisation de ces générateurs est d'une simplicité enfantine. Le fichier est créé et retourné est un PNG.
Ci-dessous un fichier "spritesheet" généré par l'application en ligne : csssprites.com

Comme vous pouvez le constater les six images sont disposées un peu n'importe comment et n'ont pas la même taille.
L'interface propose cependant le code CSS c'est à dire une classe par image incorporée :

Pour chaque image une classe. Vous comprendrez ce code en lisant la deuxième partie de ce chapitre (manipuler un spritesheet en HTML & CSS).

Utiliser Inkscape

Cependant pour manipuler facilement en HTML & CSS chaque image d'un fichier "spritesheet" il est préférable que toutes les images aient la même taille et soient positionnées à la "queue leu leu" OU dans un tableau (N lignes et N colonnes).

Comme vous savez, l'on peut importer des images matricielles dans un document Inkscape et on peut les redimensionner afin qu'elles aient toutes la même taille.
J'ai donc créé un document Inkscape qui fait 800 pixels par 200 et j'ai inséré dans ce fichier 4 logos (4 images matricelles).
La "feuille de sprites" produite avec Inkscape :

Chaque image fait 200px par 200.
Ce fichier se nomme "logos.svg" ; il comprend les logos de quatre langages du web : HTML5, CSS3, JavaScript et SVG.
Notez bien l'ordre des images : html5, css3, JS et SVG.

Manipuler un "spritesheet" en HTML & CSS

Vous savez maintenant créer ce type de fichier. Maintenant il faut pouvoir afficher dans une page certaines des images contenues dans ce "spritesheet".
Seuls les langages HTML & CSS suffisent, pas de JavaScript !

Le code CSS

div
{ 
	width: 200px;
	height: 200px;
	display: inline-block;
	margin : 20px;
	background : url("../images/logos.svg") no-repeat; 
	border : 1px solid black; 
}
.html{background-position : 0px 0px ; }
.css{background-position : -200px 0px ; }
.js{background-position : -400px 0px ; }
.svg{background-position : -600px 0px ; }

Chaque image sélectionnée sera affichée dans un DIV de 200 par 200.
Les DIV seront disposés côte à côte (display : inline-block).
Chaque DIV aura pour "background" le fichier "logos.svg" qui fait 800 par 800 ...
Donc si on en reste là chaque DIV affichera le quart supérieur gauche de "logos.svg" c'est à dire le logo de HTML5.

Aussi faut-il rajouter une classe par image constitutive du spritesheet. Donc dans l'exemple il faut 4 classes.
Chaque classe précise à partir de où extraire dans l'image de fond une zone de 200 par 200.

Observez bien le signe "-" devant l'abscisse à partir de la deuxième classe.
En effet pour la deuxième classe je demande que l'image commence à 200 pixels de son bord gauche, 400px pour la troisème classe, 600px pour la quatrième classe.

Le code HTML

On affiche deux fois chacune des images de la feuille de sprites mais dans l'ordre puis dans le désordre !

Le rendu avec le navigateur

Plus difficile

Le fichier "spritesheet" comprend 4 images réparties dans une grille de deux lignes et deux colonnes et s'intitule "drapeaux.svg" :

Le document fait 800 par 600 pixels ; chaque image fait 400 par 300.
Le "spritesheet" comprend 4 drapeaux : GB, FR,IT,PB.
Comment récupérer l'une des images du "spritesheet" compte tenu de cette disposition en tableau ?

Le code CSS

div
{ 
	width: 400px;
	height: 300px;
	display: block;
	margin : 10px auto 10px auto;
	background : url("../images/drapeaux.svg") no-repeat; 
}
.gb{background-position : 0px 0px ; }
.fr{background-position : -400px 0px ; }
.it{background-position : -0px -300px ; }
.pb{background-position : -400px -300px ; }

Chaque DIV sera centré horizontalement dans la page.

Notez que pour les deux dernières classes les ordonnées sont des valeurs négatives car l'image commence à 300px du bord supérieur.

Le code HTML

Le code HTML ne présente aucune difficulté.
Observez le rendu du code ci-dessus !

Des liens à partir d'une grille d'images

On peut à partir d'une grille d'images produire des images servant de liens hypertextes.
Le spritesheet ci-dessous fait 100 par 100 ; chaque image fait 50 par 50.

Le code CSS

a { 
	width: 50px;
	height: 50px;
	display: block;
	margin-top  : 20px ; margin-left : 50px;
}
#gb{background : url("../images/drapeaux2.svg") 0px 0px ; }
#it{background : url("../images/drapeaux2.svg") -50px 0px ; }
#fr{background : url("../images/drapeaux2.svg") 0px -50px ; }
#be{background : url("../images/drapeaux2.svg") -50px -50px ; }

J'utilise le raccourci background qui remplace background-image, background-position.
Notez que j'utilise ici quatre ID (et non pas des classes).

Le code HTML

Les balises A n'ont pas de contenu mais ont trois attributs : href, id, title.
Observez le rendu du code ci-dessus !

Remarque

La technologie des grilles d'images consiste à afficher des images sans utiliser la balise IMG mais des propriétés CSS : background-image & background-position.
Retour Menu