Générateur de sprites CSS

Comment créer une planche de sprites

1. Déposez vos images dans la zone prévue ou cliquez pour les choisir. PNG, SVG, WebP, JPG et les autres formats lus par votre navigateur sont acceptés, jusqu’à 500 images. Chaque fichier s’affiche dans la liste Images avec ses dimensions ; le bouton × en retire un, Retirer toutes les images vide la liste.
2. Choisissez une Disposition : Grille, Compacte (planche la plus petite), Bande horizontale ou Bande verticale. En Grille, le champ Colonnes (0 = automatique) fixe le nombre de colonnes.
3. Réglez la Marge entre les images (px) (2 par défaut) et cochez Taille en puissance de deux (256, 512, 1024…) si votre moteur ou votre carte graphique l’exige.
4. Choisissez le Fichier de données : CSS (classes background-position), JSON (carte des images) ou CSS et JSON. Modifiez au besoin le Nom du fichier et le Préfixe des classes CSS (« sprite » par défaut).
5. Vérifiez l’aperçu, la Taille de la planche et la Surface utilisée, puis cliquez sur Télécharger le ZIP (PNG + données) ou Télécharger le PNG seul. Le Code généré peut aussi être copié directement.

Les images sont décodées dans votre navigateur : rien n’est envoyé sur un serveur. Un SVG sans largeur ni hauteur propres est converti en pixels avec son grand côté à 256 px.

Quelle disposition choisir ?

• Grille donne à chaque image une case de la taille de la plus grande. En mode automatique, la grille est à peu près carrée. Simple et prévisible, elle convient parfaitement à des sprites de même taille, comme un jeu de tuiles.
• Compacte (planche la plus petite) range les images par étagères : de la plus haute à la plus basse, de gauche à droite, rangée par rangée. L’outil essaie de nombreuses largeurs et garde la planche de plus petite surface, en tenant compte de l’arrondi en puissance de deux si l’option est cochée. Idéal pour des icônes de tailles variées.
• Bande horizontale et Bande verticale alignent les images sur une ligne ou une colonne, dans l’ordre d’ajout. C’est le format attendu par beaucoup de lecteurs d’animation image par image.

La planche ne peut pas dépasser 16 384 px de côté ni environ 16,7 mégapixels, la limite de dessin des navigateurs.

Utiliser le sprite CSS

Le CSS contient une classe de base qui pose la planche en background-image avec no-repeat, puis une classe par sprite, tirée du nom du fichier : home.png devient sprite-home. Les noms sont mis en minuscules, les accents supprimés, les autres caractères remplacés par des tirets, et les doublons reçoivent -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Chaque classe fixe width, height et un background-position à valeurs négatives. Un sprite placé en x = 40, y = 20 reçoit background-position: -40px -20px : toute la planche est décalée de 40 px vers la gauche et de 20 px vers le haut dans l’élément, si bien que seul ce sprite apparaît dans son cadre. La marge évite que les sprites voisins « débordent » lors d’un zoom ou d’un filtrage de texture.

Écrans haute densité (Retina) : dessinez vos images au double de leur taille d’affichage, générez la planche, puis ajoutez à la classe de base un background-size égal à la moitié de la taille de la planche, et divisez par deux largeurs, hauteurs et décalages. L’outil ne le fait pas : c’est un ajustement manuel.

Les sprites ont-ils encore un intérêt avec HTTP/2 ?

Les sprites CSS servaient à économiser des requêtes HTTP. Avec le multiplexage de HTTP/2, de nombreux petits fichiers se chargent presque aussi vite qu’un seul : le gain est bien moindre pour un site web, et les icônes SVG ou les polices d’icônes sont souvent préférables pour des icônes vectorielles. En revanche, l’atlas de textures reste la norme pour les jeux 2D et les animations : une seule texture, c’est moins de changements de texture pour le GPU et un seul fichier à charger.