Générateur de Feuilles de Sprites

Combinez plusieurs images en une seule feuille de sprites et générez du code CSS.

Glissez et déposez les images ici

ou cliquez pour télécharger plusieurs fichiers

Why Use This Tool?

Utilitaires Haute Efficacité pour l'Optimisation Frontend

Reduce HTTP requests and speed up loading.

Génération Automatique de Coordonnées

Nous faisons les calculs pour que vous n'ayez pas à le faire. Obtenez instantanément des coordonnées X et Y précises pour chaque image individuelle dans votre feuille de sprites consolidée.

Algorithme d'Empaquetage Smart-Grid

Notre moteur organise intelligemment les images de différentes tailles dans la grille la plus efficace possible, minimisant l'espace vide et réduisant la taille finale du fichier.

Classes CSS Prêtes à l'Emploi

Génère un bloc CSS propre et copiable-collable avec des classes individuelles pour chaque actif, y compris les propriétés de position d'arrière-plan et de dimension.

Modes de Mise en Page Personnalisables

Choisissez entre des bandes Verticales, des bandes Horizontales ou le mode 'Grille' le plus efficace en fonction des besoins de l'architecture spécifique de votre projet.

Contrôle du Remplissage et de l'Espacement

Ajoutez un espacement personnalisé entre les sprites pour éviter le 'saignement de pixels' — où des parties de l'icône adjacente apparaissent accidentellement dans votre interface utilisateur.

Protection du Traitement de la Mémoire Locale

Vos actifs d'interface utilisateur sont votre propriété. Tout l'empaquetage et la génération de code se produisent directement dans votre navigateur, garantissant qu'aucune donnée ne quitte jamais votre appareil.

Un Guide des Actifs Haute Vitesse : Comment Utiliser le Générateur

Create sprites in minimal steps.

Collectez Vos Petits Actifs

Rassemblez toutes les petites icônes, boutons ou cadres d'une animation que vous souhaitez combiner. Assurez-vous qu'ils sont dans un format de haute qualité comme PNG.

Téléchargement par Lot vers l'Outil

Sélectionnez tous les fichiers à la fois et téléchargez-les. L'outil créera immédiatement un aperçu visuel de la façon dont ils peuvent être empaquetés ensemble.

Configurez l'Optimisation

Ajustez le 'Remplissage' si vous craignez que les bords n'apparaissent sur les écrans retina, ou choisissez une disposition 'Verticale' si vous construisez un menu latéral ou une bande de film.

Vérifiez l'Aperçu du Sprite

Vérifiez la feuille générée. Assurez-vous que chaque élément est visible et que la grille est serrée et efficace sans espace perdu.

Téléchargez l'Image Atlas

Cliquez sur le bouton 'Télécharger la Feuille de Sprites' pour enregistrer le fichier image consolidé dans le dossier d'actifs de votre projet.

Maîtrise de la Feuille de Sprites : Secrets de Création d'Actifs de Jeu

Les feuilles de sprites sont-elles toujours pertinentes avec HTTP/2 ?

Oui ! Bien que HTTP/2 gère mieux les requêtes multiples, les feuilles de sprites sont toujours plus rapides car elles réduisent la quantité totale de métadonnées et la surcharge de compression.

Que se passe-t-il si j'ai des images de tailles différentes ?

Notre algorithme de grille intelligente est conçu pour cela ! Il organisera vos images de toutes formes et tailles dans le rectangle le plus compact possible.

Dois-je utiliser JPG ou PNG pour ma feuille de sprites ?

Nous recommandons fortement le PNG. Il gère mieux les 'bords nets' des icônes et prend en charge la transparence, ce qui est essentiel pour la plupart des travaux d'interface utilisateur Web.

Y a-t-il une limite au nombre d'images que je peux inclure ?

Techniquement, non. Cependant, nous recommandons de s'en tenir à environ 50-100 images par feuille pour éviter que les dimensions du fichier ne deviennent trop grandes.

Qu'est-ce que le 'Saignement de Pixels' ?

Cela se produit lorsque le rendu sous-pixel montre un éclat de l'image suivante dans la feuille. Ajoutez 1-2 pixels de 'Remplissage' dans notre outil pour éviter cela.

Cet outil prend-il en charge le SVG ?

Cet outil est pour les sprites raster (PNG/JPG). Pour les SVG, vous devriez utiliser une approche 'SVG Sprite' qui est gérée différemment dans les navigateurs modernes.

Comment mettre à jour une feuille de sprites plus tard ?

Il suffit de re-télécharger les icônes originales plus la nouvelle. Notre outil vous donnera une nouvelle feuille et un nouveau CSS en quelques secondes.

Cet outil est-il gratuit pour les développeurs de jeux ?

Oui ! Que vous fassiez un site Web ou un jeu mobile, notre générateur est 100 % gratuit sans restrictions commerciales.

Les navigateurs peuvent-ils mettre en cache les feuilles de sprites ?

Oui ! C'est l'un des plus grands avantages. Le navigateur n'a besoin de mettre en cache qu'un seul fichier pour avoir chaque icône prête pour toutes les pages de votre site.

Mes données d'icônes propriétaires sont-elles en sécurité ?

Absolument. Parce que vos fichiers sont traités localement dans votre navigateur, vos conceptions ne sont jamais téléchargées, stockées ou consultées par notre système.