Softonic

Générateur de sprite sheet

Étape / 3
Restauration du fichier sélectionné...

Déposez un lot d’images et le générateur les dispose sur une grille uniforme et dessine un seul PNG de sprite sheet dans votre navigateur, puis produit du CSS avec un décalage background-position par sprite. Tout s’exécute localement sur le canvas, donc rien n’est envoyé à un serveur. Pratique pour les jeux d’icônes, les images de jeux rétro et les états d’interface où vous préférez un seul fichier plutôt que de nombreuses images séparées. Vous réglez le nombre de colonnes, la taille de tuile, l’espacement entre les cellules et l’arrière-plan (transparent, blanc ou noir).

Comment le sprite sheet est construit

  1. 1

    Déposez vos images

    Ajoutez des fichiers PNG, JPG ou WebP. Réorganisez-les avec les boutons monter/descendre ou retirez une image ; la feuille se reconstruit aussitôt.

  2. 2

    Définissez la grille

    Choisissez le nombre de colonnes ; les lignes découlent du nombre d'images ajoutées. Chaque image est mise à l'échelle pour tenir dans une tuile carrée, en conservant ses proportions et centrée.

  3. 3

    Réglez la taille de tuile et l'espacement

    Choisissez la taille de tuile en pixels et ajoutez un espacement entre les cellules pour éviter que des sprites voisins ne débordent lors du redimensionnement.

  4. 4

    Téléchargez le PNG et copiez le CSS

    Enregistrez le sprite sheet en un seul PNG et copiez les classes CSS générées, une règle `.spr-nom` par image avec sa largeur, sa hauteur et son background-position.

Comment fonctionne la disposition

Le générateur utilise une disposition unique et prévisible : une grille uniforme. Vous fixez le nombre de colonnes, et le nombre de lignes vaut arrondi_supérieur(images / colonnes). Chaque cellule a la même taille carrée (la taille de tuile choisie), donc chaque image est mise à l’échelle pour tenir dans sa cellule en conservant ses proportions, puis centrée. Des images de tailles différentes se retrouvent toutes dans des cellules égales, exactement ce qu’attendent les sprites CSS avec background-position.

Réglage Plage Effet
Colonnes 1 à 16 Sprites par ligne ; les lignes se calculent automatiquement
Taille de tuile 32 à 512 px La cellule carrée dans laquelle chaque image est ajustée
Espacement 0 à 64 px Écart transparent entre cellules pour éviter le débordement au redimensionnement
Arrière-plan Transparent / Blanc / Noir Remplissage derrière les sprites dans le PNG de sortie

Forme du CSS produit

Chaque image devient une classe nommée d’après son fichier (.spr-<nom>), dimensionnée à la taille de tuile et décalée vers sa cellule. Avec quatre colonnes, une taille de tuile de 128 px et sans espacement, la feuille ressemble à ceci :

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Le décalage se déplace en deux dimensions : les sprites remplissent chaque ligne de gauche à droite, puis passent à la ligne suivante. Enregistrez le PNG sous spritesheet.png à côté de votre CSS (ou modifiez url(...) pour correspondre à votre chemin).

Espacement et débordement

Des sprites collés bord à bord peuvent déborder les uns sur les autres quand le navigateur redimensionne la feuille (rapports de pixels non entiers, transformations CSS). Ajoutez 2 à 4 pixels d’espacement entre les cellules pour empêcher les pixels voisins de s’infiltrer.

Écrans haute densité (retina)

Il n’y a pas d’export 2x automatique, mais vous pouvez obtenir une feuille plus nette simplement : choisissez une taille de tuile plus grande (par exemple 256 px au lieu de 128 px) pour que chaque sprite porte plus de pixels, puis affichez-le à la moitié de la taille CSS. Vous obtenez ainsi des sprites nets sur les écrans à forte densité sans passe supplémentaire.

Sprite sheets ou alternatives

  • Sprite sheets : jeux d’icônes classiques en CSS, images de jeux HTML5 et pages qui gagnent à regrouper de nombreuses petites images en un seul fichier.
  • Sprites SVG (symbol) : meilleurs pour les icônes d’interface modernes, se mettent à l’échelle sans perte, acceptent fill en CSS, sans jongler avec background-position.
  • Polices d’icônes : limitées, mais toujours utilisées pour de minuscules icônes monochromes.
  • Fichiers séparés avec HTTP/2 ou HTTP/3 : le multiplexage rend le nombre de requêtes moins important qu’avant.

Questions fréquentes

Les images restent dans votre navigateur. Dans le parcours en plusieurs étapes, les fichiers sélectionnés et la mise en page sont conservés temporairement dans cet onglet du navigateur pendant 30 minutes au maximum. Rien n’est envoyé à un serveur ni ajouté à l’URL.

Oui, mais les SVG en ligne ou les sprites SVG <symbol> conviennent souvent mieux aux frameworks de composants. Les sprite sheets CSS brillent quand de nombreuses images s’affichent en même temps sur des pages statiques.

Réglez le nombre de colonnes sur votre nombre d’images pour que chacune tienne sur une ligne, puis pilotez-la avec animation-timing-function: steps(N) en CSS et un background-position qui saute de cellule en cellule. Idéal pour de courtes animations en boucle (spinners, états au repos).

Chaque cellule de la grille a la même taille carrée (la taille de tuile choisie), donc chaque image est ajustée dans sa cellule et centrée. Si vos sprites sont déjà des carrés identiques, réglez la taille de tuile en conséquence et ils passeront inchangés.

Outils similaires

Créateur de tier list

Créez une tier list privée avec textes et images locales, personnalisez les niveaux, classez au clavier ou par glisser-déposer et exportez.

Compresser GIF

Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.

Générateur de graffitis

Créez un texte façon graffiti avec des effets tag, bulle, bloc, pochoir, néon et wildstyle. Réglez les couleurs et exportez-le en PNG ou SVG.

Générateur de codes-barres

Créez dans le navigateur un code-barres 1D en Code 128, EAN, UPC, ITF-14 ou autre format pris en charge, puis téléchargez-le en SVG ou PNG.

Créateur de papier à en-tête

Créez un papier à en-tête réutilisable avec vos coordonnées, couleurs et logo ou initiales. Prévisualisez en A4 ou US Letter, puis imprimez, enregistrez en PDF depuis le navigateur ou téléchargez un PNG.

Éditeur de photos

Éditeur de photos dans le navigateur avec recadrage, rotation, luminosité, contraste, saturation, filtres, texte superposé et export en JPG, PNG ou WebP.