Ordonnez les images et vérifiez l’aperçu. Le CSS généré donne à chaque image sa propre taille et sa position d’arrière-plan dans la feuille, et le ZIP contient le PNG et la feuille de styles.
Fonctionne localement dans votre navigateurLe générateur dessine les images sélectionnées sur un PNG transparent et écrit le CSS qui replace chaque image à l’écran avec background-position. Le canevas compose la feuille, JSZip prépare l’archive, et tout se passe dans la page : rien n’est téléversé.
Chaque cellule adopte la largeur et la hauteur de l’image la plus grande de la sélection, et chaque image est centrée dans sa cellule. Les règles gardent la taille propre de chaque image : une icône de 16 × 16 et une bande de 64 × 4 partagent une même feuille sans être redimensionnées.
Le fichier s’ouvre sur une classe de base — .sprite-<préfixe> avec display: inline-block, background-image: url("voritools-sprite.png") et background-repeat: no-repeat — puis une règle par image : .<préfixe>-<nom> avec sa largeur, sa hauteur et la background-position négative dans la feuille.
Le préfixe et les noms de fichiers subissent la même normalisation : minuscules, suites d’autres caractères remplacées par un tiret, tirets de début et de fin supprimés. my icon.png devient my-icon, un nom répété reçoit -2 puis -3, et un préfixe qui ne laisse rien revient à icon pour que la classe de base et les règles concordent.
Une exécution accepte au plus 50 fichiers et 250 Mo, et le canevas ne doit pas dépasser 16384 pixels par côté ni 32 000 000 de pixels au total. Une feuille plus grande s’arrête sur « Le canevas généré est trop volumineux pour un traitement fiable par le navigateur. » et n’exporte rien.
Le 51e fichier n’est pas écarté en silence : la ligne d’état indique combien de fichiers dépassent la limite et la liste conserve les 50 premiers. Colonnes et Espacement sont arrondis au pixel entier avant usage — 2,5 devient 3 colonnes — et le champ affiche la valeur appliquée.
Tout se passe dans le navigateur. Ajouter des images, générer, copier le CSS, télécharger le ZIP et vider la liste n’ont déclenché aucune requête réseau lors de l’essai (en, fr, ja) après le chargement de la page, et les images ne quittent pas l’appareil.
La feuille est dessinée par le décodeur du navigateur : les PNG, JPEG et SVG se chargent comme partout ailleurs, et un fichier tronqué ou vide est refusé avec « Ce navigateur ne peut pas décoder ce format de fichier. » Un SVG sans attributs width et height est dessiné à la taille par défaut du navigateur, 300 × 150.