Feuille de sprites d'image Combinez plusieurs images en une seule feuille de sprites avec des colonnes et des espacements configurables.

What Is Feuille de sprites d'image?

Un générateur de feuilles d'images qui combine plusieurs images en une seule image composite organisée sous forme de grille, ainsi que les coordonnées CSS de la position de l'arrière-plan pour chaque sprite. Essentiel pour l'optimisation des performances Web, les animations de sprites de jeu et les jeux d'icônes. Téléchargez vos images individuelles, définissez le nombre de colonnes et le remplissage, et l'outil génère à la fois l'image PNG composite et le code CSS.

Why Use Feuille de sprites d'image?

• Génère une image de feuille de sprites + coordonnées CSS
• Colonnes et espacement configurables
• Réduit les requêtes HTTP pour de meilleures performances Web
• Parfait pour les ensembles d'icônes et les sprites de jeux

Common Use Cases

Performances Web

Combinez des icônes en une seule feuille de sprites pour réduire les requêtes HTTP.

Développement de jeux

Créez des feuilles de sprites d'animation à partir d'images de cadres individuels.

Ensembles d'icônes

Emballage de plusieurs icônes en une seule image de sprite efficace.

Sprites CSS

Générez des feuilles de sprites optimisées avec du code CSS prêt à l'emploi.

Technical Guide

Les images sont chargées et organisées en grille avec des colonnes configurables. Le nombre de lignes est calculé comme étant le plafond (nombre d'images / colonnes). Les dimensions du canevas sont calculées à partir de la largeur maximale par colonne et de la hauteur totale des lignes plus le remplissage. Chaque image est dessinée à sa position de grille calculée. Les coordonnées CSS sont générées sous forme de valeurs de position d'arrière-plan négatives pour chaque sprite.

Tips & Best Practices

• 1
  Utilisez des tailles d'image cohérentes pour une grille propre
• 2
  Maintenez un espacement de 1-2px pour minimiser les espaces inutiles
• 3
  Nommez vos fichiers de manière descriptive pour de meilleurs noms de classes CSS
• 4
  Utilisez des puissances de 2 pour la compatibilité avec les moteurs de jeu

Related Tools

Redimensionneur d'images

Redimensionnez les images en fonction de dimensions exactes en pixels ou en pourcentage tout en conservant le rapport d'aspect.

🖼️ Image Tools

Générateur de Favicon

Générer des favicons dans plusieurs tailles (16x16, 32x32, 48x48 et plus) à partir de n'importe quelle image.

🖼️ Image Tools

Collage d'images

Combinez plusieurs images en un seul collage avec des dispositions et espacements personnalisables.

🖼️ Image Tools

Créateur de grille d'images

Divisez une image unique en une grille de tuiles de taille égale pour les publications Instagram et les puzzles.

🖼️ Image Tools

Frequently Asked Questions

Q Quelles tailles d'image fonctionnent le mieux ?

Les tailles cohérentes produisent les sprites les plus propres, mais les tailles mélangées sont prises en charge.

Q Génère-t-il du CSS ?

Oui - du CSS complet avec des valeurs de position d'arrière-plan pour chaque sprite.

Q Combien d'images puis-je combiner ?

Tout nombre d'images peut être combiné en une seule feuille de sprites.

Q Et les écrans retina ?

Utilisez des images à résolution 2x et divisez la taille d'arrière-plan CSS par deux pour prendre en charge les écrans retina.

Q Puis-je l'utiliser pour les sprites de jeux ?

Absolument - organisez les cadres d'animation dans une séquence pour les feuilles de sprites de jeu.

About This Tool

Feuille de sprites d'image is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.