Mes images sont-elles envoyées à un serveur ?

Non. Tout s'exécute dans votre navigateur via l'API Canvas. Vos fichiers ne quittent jamais votre appareil.

Combien d'images puis-je ajouter à une feuille de sprites ?

Il n'y a pas de limite stricte — l'outil empaquète autant d'images que la mémoire de votre navigateur le permet. Pour de meilleures performances, gardez les sprites à une taille raisonnable.

À quoi sert le réglage de largeur de ligne maximale ?

Il limite la largeur maximale que chaque rangée de sprites peut atteindre avant que l'empaqueteur commence une nouvelle ligne. Une valeur plus grande produit une feuille plus large ; une valeur plus petite produit une feuille plus haute et plus étroite.

Puis-je utiliser le CSS généré directement dans mon projet ?

Oui. Chaque classe de sprite inclut l'URL de background-image (pointant vers votre PNG téléchargé), background-position, width et height — collez-le dans n'importe quelle feuille de styles et appliquez la classe à vos éléments HTML.

Quels formats d'image puis-je utiliser comme sprites d'entrée ?

Tout format que votre navigateur peut décoder — PNG, JPEG, WebP, GIF, SVG, AVIF et plus encore. La feuille de sprites de sortie est toujours un PNG unique pour une compatibilité maximale.

Cet outil téléverse-t-il mes données ?

Non. Tout s'exécute dans votre navigateur, vos données ne quittent jamais votre appareil — et une fois la page chargée, cela marche même hors ligne.

🗂️ Générateur de Feuille de Sprites

Regroupez plusieurs images en une seule feuille de sprites PNG optimisée et obtenez des règles CSS background-position prêtes à l'emploi — gratuit, dans le navigateur, sans téléversement.

🗂️

Déposez des images ici, ou cliquez pour en sélectionner plusieurs

Packé en un PNG + CSS — dans votre navigateur, sans téléchargement

Confidentiel par conception. Cet outil fonctionne entièrement dans votre navigateur — rien de ce que vous saisissez n'est téléversé ni stocké, et il marche hors ligne.

À propos

Cet outil utilise l'API Canvas du navigateur pour empaqueter vos images en une feuille de sprites PNG compacte entièrement sur votre appareil — rien n'est envoyé à un serveur. Déposez autant d'images que nécessaire, définissez la largeur de ligne maximale et la marge par sprite, et l'empaqueteur les dispose ligne par ligne pour minimiser l'espace perdu. Une fois générée, vous pouvez télécharger le PNG combiné et copier l'extrait CSS, qui contient une classe par sprite avec les valeurs correctes de background-image, background-position, width et height prêtes à coller dans votre feuille de styles. Comme tout s'exécute localement dans votre navigateur, le processus est instantané et totalement privé.

Comment l'utiliser

Déposez vos images dans la zone de téléchargement, ou cliquez pour parcourir et sélectionner plusieurs fichiers à la fois.
Définissez la largeur de ligne maximale (en pixels) et la marge autour de chaque sprite pour contrôler la densité d'empaquetage.
Cliquez sur Générer la feuille de sprites pour regrouper toutes les images en un PNG combiné, avec aperçu instantané sur le canvas.
Copiez le CSS généré — chaque sprite obtient sa propre classe avec les valeurs correctes de background-position, width et height.
Téléchargez la feuille de sprites PNG et collez le CSS dans la feuille de styles de votre projet — terminé.

FAQ

Mes images sont-elles envoyées à un serveur ?: Non. Tout s'exécute dans votre navigateur via l'API Canvas. Vos fichiers ne quittent jamais votre appareil.
Combien d'images puis-je ajouter à une feuille de sprites ?: Il n'y a pas de limite stricte — l'outil empaquète autant d'images que la mémoire de votre navigateur le permet. Pour de meilleures performances, gardez les sprites à une taille raisonnable.
À quoi sert le réglage de largeur de ligne maximale ?: Il limite la largeur maximale que chaque rangée de sprites peut atteindre avant que l'empaqueteur commence une nouvelle ligne. Une valeur plus grande produit une feuille plus large ; une valeur plus petite produit une feuille plus haute et plus étroite.
Puis-je utiliser le CSS généré directement dans mon projet ?: Oui. Chaque classe de sprite inclut l'URL de background-image (pointant vers votre PNG téléchargé), background-position, width et height — collez-le dans n'importe quelle feuille de styles et appliquez la classe à vos éléments HTML.
Quels formats d'image puis-je utiliser comme sprites d'entrée ?: Tout format que votre navigateur peut décoder — PNG, JPEG, WebP, GIF, SVG, AVIF et plus encore. La feuille de sprites de sortie est toujours un PNG unique pour une compatibilité maximale.
Cet outil téléverse-t-il mes données ?: Non. Tout s'exécute dans votre navigateur, vos données ne quittent jamais votre appareil — et une fois la page chargée, cela marche même hors ligne.