Creation
Générateur de feuilles de sprites
Combinez plusieurs images en une feuille de sprites avec sortie CSS, JSON et SCSS pour les développeurs.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the Générateur de feuilles de sprites to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Générateur de feuilles de sprites by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Générateur de feuilles de sprites</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Générateur de feuilles de sprites
Last updated: May 2026
OptiPix Sprite Sheet Generator combine plusieurs images en une seule feuille de sprites optimisée, avec du CSS, des coordonnées JSON et des variables SCSS prêts à être copiés-collés. Choisissez une disposition : bande horizontale, bande verticale, grille (nombre de colonnes personnalisable) ou empaquetée (empaquetage de boîtes pour un minimum d'espace perdu). Définissez un espacement entre les sprites pour éviter les bavures de bordure. Le résultat est une seule feuille de sprites PNG plus le CSS généré pour chaque sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), une carte de coordonnées JSON et des variables SCSS. La mise à l'échelle Retina @1x et @2x est prise en charge. Chaque sprite est nommé d'après le nom de fichier de sa source. Tout s'exécute localement - vos images ne quittent jamais votre appareil. Conçu pour les développeurs de jeux, les développeurs web utilisant des sprites CSS, et toute personne souhaitant regrouper de petites icônes en une seule requête réseau.
How It Works
Chaque image d'entrée est chargée en mémoire ; l'algorithme de disposition choisi (bande, grille ou empaquetage de boîtes) calcule les coordonnées (x, y, l, h) par sprite ; la feuille de sprites est rendue sur un canevas ; le CSS / JSON / SCSS sont générés à partir de la même carte de coordonnées.
Use Cases
- •Regrouper les icônes de l'interface utilisateur en une seule feuille de sprites PNG + CSS
- •Créer un atlas de sprites pour un jeu 2D dans Phaser ou Pixi
- •Combiner les icônes des médias sociaux en un seul sprite CSS pour un site plus rapide
- •Empaqueter les images d'animation de personnages dans une bande horizontale
- •Construire une feuille de sprites @2x prête pour la Retina à partir des images sources
You Might Also Like
If you find Générateur de feuilles de sprites useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
Quelle disposition dois-je utiliser ?
Qu'est-ce que l'empaquetage de boîtes ?
Puis-je exporter du CSS / JSON / SCSS ?
Pourquoi utiliser une feuille de sprites ?
Mes images sont-elles téléchargées ?
Related Tools
Recadrage d'images
Recadrez selon n'importe quel rapport d'aspect ou forme – cercle, cœur, étoile, hexagone – avec rotation et redressement.
Redimensionneur d'images
Redimensionnez les images pour Instagram, Twitter, LinkedIn, et plus encore.
Convertisseur de format
Convertissez des images entre JPEG, PNG, WebP, et plus encore.
Générateur de favicon
Générez toutes les tailles de favicon + fichier ICO + manifeste web à partir de n'importe quelle image, texte ou emoji.