Générateur de Sprite CSS

Cliquez pour télécharger une image

Formats pris en charge : PNG, JPG, WebP

Disposition

Espacement des images: 10px

050

Téléversez une image pour prévisualiser le sprite

Fusionnez plusieurs petites icônes en une feuille de sprite CSS directement en ligne. Le traitement s'effectue dans votre navigateur sans aucun téléversement, et le code CSS background-position est généré pour les dispositions horizontale, verticale et en grille.

Recommandations connexes

Generateur ICO

Compresser des images

Convertir Image

Redimensionner une image

Recadrer Image

Pivoter et Miroir d'Image

Qu'est-ce qu'un sprite CSS ?

Un sprite CSS combine plusieurs petites images en une image plus grande et utilise background-position pour afficher chaque icône individuellement. Le terme sprite vient des premières consoles de jeu, qui regroupaient plusieurs frames d'animation dans une seule image et les faisaient défiler. Le web a repris l'idée pour charger de nombreuses petites icônes en une seule requête.

**Pourquoi avons-nous besoin de sprites ?** À l'ère du HTTP/1.1, chaque fichier image déclenchait une requête distincte, avec poignée de main TCP, poignée de main TLS et en-têtes. Cent icônes signifiaient cent requêtes. Un sprite place toutes les icônes dans une seule image, terminant le chargement en une requête et accélérant le premier affichage. Le multiplexage HTTP/2 réduit une partie de cet avantage, mais les sprites restent utiles pour le cache CDN, la compression gzip et le repli HTTP/1.1.

**Comment ça marche :** imaginez un sprite de 200x60 avec trois icônes de 60x60 alignées. Pour afficher la première, définissez un élément de 60x60 avec `background: url(sprite.png); background-position: 0 0;`. Passez à -60px 0 pour la deuxième, et -120px 0 pour la troisième. Cet outil génère automatiquement toutes ces coordonnées pour vous.

**Alternatives modernes :** SVG + use ou symbol (recommandé, vectoriel, colorable, animable), Icon Font (large compatibilité, multiplateforme), HTTP/2 server push et icônes en police web. Chacune a ses points forts : choisissez selon les besoins de votre projet.

Cas d'utilisation

Projets web comportant de nombreuses petites icônes à fusionner en sprite pour réduire les requêtes HTTP et accélérer le premier affichage
Développeurs frontend ayant besoin de centraliser les icônes du projet et de générer automatiquement le code CSS background-position
Équipes souhaitant générer en lot le sprite et le CSS et livrer un livrable prêt à intégrer
Après fusion, passez l'image combinée dans l'[outil de compression d'image](/image/compress/) pour réduire la taille totale et améliorer le LCP
Applications, Electron ou clients de bureau ayant besoin de regrouper des actifs d'icônes statiques dans une seule image
Templates HTML d'e-mail ou blogs statiques ayant besoin de plusieurs icônes tout en restant compatibles avec les clients de messagerie
Designers livrant les icônes sous forme de sprite pour une intégration rapide par les développeurs frontend
Sprites dédiés 2x pour écrans Retina, adaptés aux affichages 1x et 2x via background-size

Comment utiliser

Cliquez sur la zone de téléversement ou glissez-y plusieurs images (JPG, PNG, WebP et GIF acceptés)
Réordonnez les icônes dans la liste de gauche via la poignée de glisser ou les boutons haut/bas
Choisissez Horizontale, Verticale ou Grille dans la section de disposition du panneau de gauche
Ajustez le curseur de padding pour définir l'espace en pixels entre les icônes (1 à 5 px recommandé)
Prévisualisez le sprite en temps réel à droite, puis cliquez sur Télécharger pour enregistrer le PNG et Copier pour récupérer le CSS

Fonctionnalités

Fusion d'images en un clic : téléversez plusieurs petites icônes et combinez-les en un seul sprite
Trois modes de disposition : horizontale, verticale et en grille, interchangeables selon l'usage
Padding ajustable : un curseur de 0 à 50 px contrôle l'espace entre les icônes
Glisser-déposer pour réordonner : déplacez les icônes dans la liste pour changer l'ordre, les coordonnées CSS se mettent à jour automatiquement
Réorganisation mobile : les boutons haut/bas permettent de réordonner sur téléphone et tablette
CSS généré automatiquement : background-position, largeur et hauteur de chaque icône sont produits pour vous
Aperçu en temps réel : le sprite se régénère instantanément à chaque modification pour un vrai WYSIWYG
Copie du CSS en un clic : un bouton intégré copie la feuille de styles complète dans le presse-papiers
Téléchargement PNG en un clic : l'image combinée s'enregistre en local sous sprite.png
Traitement local dans le navigateur : l'API Canvas fusionne les fichiers localement, rien n'est téléversé
Plusieurs formats d'entrée : JPG, PNG, WebP et GIF sont pris en charge
Transparence préservée : la sortie PNG conserve le fond transparent d'origine pour des compositions nettes

Best Practices

Adaptation Retina 2x : utilisez des fichiers source 2x

Si vos utilisateurs sont sur écrans Retina (Mac, iPhone, Windows HiDPI), téléversez des sources en résolution 2x (par exemple des icônes 32x32) et générez le sprite à partir de celles-ci, puis utilisez background-size: 32px auto en CSS pour revenir à 16x16. Les écrans 1x et 2x restent nets avec un seul sprite.

Les sprites restent utiles en HTTP/2

Le multiplexage HTTP/2 réduit en grande partie le goulot d'étranglement du nombre de requêtes, mais les sprites gardent quatre avantages : réutilisation du cache CDN, compression gzip ou Brotli, passage des proxies internes et repli HTTP/1.1. Les intranets d'entreprise, les systèmes bancaires ou gouvernementaux et les templates HTML d'e-mail fonctionnent encore principalement en HTTP/1.1, où les sprites sont irremplaçables.

PNG-8 ou PNG-24 : choisir la bonne profondeur

L'outil produit un PNG fixe, mais vous choisissez la profondeur du fichier source. Les icônes plates ou monochromes doivent être en PNG-8 (transparence sans perte, 60 à 80 % plus petites que PNG-24). Les icônes avec dégradés, ombres ou hautes lumières nécessitent du PNG-24. L'outil accepte tout format, donc optimisez vos sources avec un compresseur PNG avant la fusion.

Cache CDN : hasher le nom de fichier pour un cache permanent

Évitez un nom fixe sprite.png. Renommez avec un hash de contenu (par exemple sprite.a3f2b1.png) et réglez Cache-Control: max-age=31536000 pour un cache permanent. Le navigateur télécharge une fois, puis sert depuis le cache local, économisant plus de bande passante que HTTP/2 seul. L'outil produit sprite.png par défaut ; vous pouvez renommer après téléchargement.

gzip ou Brotli rendent les sprites encore plus petits

Un sprite combiné a une meilleure continuité de pixels que des images dispersées, donc gzip ou Brotli le compresse bien plus efficacement. Nginx avec gzip niveau 1 réduit en général les sprites de 60 à 80 %, et Brotli atteint 85 % et plus. Avec Content-Encoding activé, un sprite de 1 Mo peut être transmis en 200 à 300 Ko. C'est l'avantage le plus sous-estimé des sprites.

CSS Modules ou Vue scoped CSS : enveloppez avec :global()

Si votre projet utilise CSS Modules ou Vue scoped CSS, les classes .icon-home et .sprite générées par cet outil seront hashées localement et cesseront de fonctionner. Enveloppez les classes partagées avec :global(.sprite) { ... } dans votre .module.css, ou bien renoncez à CSS Modules et utilisez une nomenclature BEM.

Mixer avec Icon Font : UI essentielle en font, icônes complexes en sprite

Le pattern le plus stable en production est le mélange. Utilisez Icon Font pour les icônes UI universelles (paramètres, fermer, recherche, utilisateur), car elles sont colorables, vectorielles et multiplateformes. Utilisez les sprites pour les icônes complexes en couleur (logos produit, icônes de bannière). Les deux approches se complètent et évitent le coût de maintenance d'un choix unique.

spritesmith pour les projets d'ingénierie, cet outil pour les prototypes

Pour les projets de longue durée, intégrez spritesmith (Webpack) ou gulp.spritesmith au pipeline de build : les modifications régénèrent le sprite, les noms avec hash sont émis, et les variables SCSS ou LESS sont générées automatiquement. Cet outil est pensé pour des prototypes sans dépendance et de petites livraisons, tandis que les plugins de build conviennent mieux aux pipelines CI/CD.

Les projets modernes peuvent migrer du sprite au SVG symbol

Si votre projet prend en charge les navigateurs modernes (Chrome, Safari, Firefox, Edge, plus IE 11+), envisagez de migrer du sprite au SVG symbol : un seul fichier gère toutes les icônes, le CSS contrôle la couleur et l'animation, et il n'y a plus de coordonnées background-position à maintenir. Le sprite généré par cet outil constitue un actif de transition valide pendant la migration.

FAQ

Qu'est-ce qu'un sprite CSS et pourquoi fusionner les images ?

Un sprite CSS combine plusieurs petites images en une image plus grande et utilise background-position pour afficher chaque icône individuellement. Avec les sprites, le navigateur effectue une seule requête HTTP pour charger toutes les icônes, ce qui réduit fortement le nombre de requêtes et accélère le premier affichage par rapport au chargement de dizaines de fichiers séparés. C'est une technique classique d'optimisation frontend.

Comment fusionner plusieurs icônes en un sprite en ligne ?

Téléversez vos images et l'outil les fusionne dans la disposition choisie avec un aperçu en temps réel. À droite, il génère le code CSS background-position (avec largeur et hauteur) pour chaque icône, prêt à coller dans votre feuille de styles. Le sprite généré est en PNG et se télécharge d'un clic.

Comment utiliser le code CSS généré ?

Placez sprite.png dans votre projet (par exemple /img/sprite.png) et collez le CSS dans votre feuille de styles. Ajoutez la classe .sprite et la classe .icon-xxx correspondante à tout élément devant afficher une icône, par exemple <i class="sprite icon-home"></i>. Les noms de classes sont générés automatiquement à partir du nom de fichier d'origine.

Quels modes de disposition sont pris en charge ?

Trois modes : horizontale (icônes de gauche à droite sur une ligne), verticale (icônes empilées de haut en bas sur une colonne) et grille (icônes organisées automatiquement en matrice carrée ; les colonnes sont la racine carrée arrondie au supérieur). Changez de mode dans le panneau de gauche pour prévisualiser le résultat.

Puis-je ajuster l'espace entre les icônes ?

Oui. Le panneau de gauche propose un curseur de padding de 0 à 50 px ; 1 à 5 px est recommandé. Un padding raisonnable évite la bavure des pixels de bord lors du positionnement CSS, mais n'affecte pas l'utilisation finale. Le padding vit dans le sprite, tandis que le CSS n'utilise que les coordonnées précises de background-position.

Puis-je réordonner les icônes ?

Oui. Chaque élément de la liste de gauche se déplace par glisser-déposer grâce à la poignée, et les boutons haut/bas fonctionnent sur mobile. Le sprite et les coordonnées CSS se régénèrent automatiquement dès que l'ordre change.

Quels formats d'image sont pris en charge ?

Tous les formats courants : JPG, PNG, WebP, GIF et plus encore. La sortie est toujours en PNG (préserve la transparence). Préférez le PNG en entrée, car les fonds transparents survivent à la fusion dans le sprite.

Les sprites CSS restent-ils utiles dans les projets modernes ?

Le multiplexage HTTP/2 réduit une partie de l'avantage des sprites, mais ceux-ci conservent leur valeur grâce au cache CDN, à la compression gzip et à un premier affichage plus rapide des icônes clés. Si vous avez moins de 10 icônes ou avez besoin de couleur et d'animation, privilégiez SVG symbol ou Icon Font. Pour de nombreuses icônes PNG statiques, le sprite reste un choix stable et fiable.

Les sprites deviennent-ils flous sur les écrans Retina ? Comment y remédier ?

Oui, ils peuvent le devenir. Les écrans Retina (Mac, iPhone, Windows HiDPI) ont 2x ou 3x plus de pixels physiques, donc un sprite 1x est étiré et paraît flou. La solution consiste à téléverser des sources 2x (32x32 au lieu de 16x16) et à remettre le sprite à l'échelle 16x16 en CSS avec background-size: 32px auto.

La fusion d'icônes dégrade-t-elle la qualité d'image ?

Non. La fusion se contente de placer chaque image à sa position sur un grand canevas. Aucun rééchantillonnage, compression ou ajustement de couleur n'est appliqué. Le PNG de sortie conserve la qualité d'origine. Pour réduire davantage le fichier fusionné, passez-le dans l'[outil de compression d'image](/image/compress/).

Mes images de sprite sont-elles envoyées sur un serveur ?

Non. Toute la fusion se fait dans votre navigateur local via l'API Canvas. Les fichiers ne quittent jamais votre appareil et sont supprimés à la fermeture de la page. Les icônes internes, logos non publiés et autres ressources sensibles peuvent être traités en toute confiance.

Comment télécharger le sprite généré ?

Dès que les images sont téléversées, un aperçu est généré. Cliquez sur le bouton Télécharger du panneau de gauche pour enregistrer sprite.png en local. Le CSS est aussi généré automatiquement, et un clic sur Copier l'envoie dans le presse-papiers.

Puis-je personnaliser les noms de classes ?

Les noms de classes sont générés automatiquement à partir du nom de fichier d'origine avec le préfixe .icon-. Par exemple, home.png devient .icon-home. Utilisez des noms en anglais, chiffres et tirets pour obtenir des noms de classes propres et lisibles.

Comment choisir entre sprite, Icon Font et SVG symbol ?

Cela dépend du cas d'usage. Beaucoup d'icônes PNG statiques ou besoin de supporter les anciennes versions d'IE : sprite. Icônes UI universelles devant changer de couleur et rester multiplateformes : Icon Font. Projets modernes nécessitant couleur, animation et un fichier unique : SVG symbol est le premier choix. En pratique, le mélange est courant : Icon Font pour les icônes UI clés, sprite pour les icônes complexes en couleur.

Puis-je compresser le sprite fusionné avec l'outil de compression ?

Oui. Cet outil produit un PNG sans perte, qui peut être volumineux. Un bon flux de travail : générez le sprite ici, puis utilisez l'[outil de compression d'image](/image/compress/) pour réduire le PNG ou le convertir en JPG (si vous n'avez pas besoin de transparence), et enfin le [convertisseur d'image](/image/convert/) pour passer en WebP si vous le souhaitez. Combiner les outils maximise les performances de chargement.

Glossaire

Sprite CSS: Technique consistant à combiner plusieurs petites images en une image plus grande et à utiliser background-position pour afficher chaque icône individuellement. Une optimisation frontend classique.
background-position: Propriété CSS définissant les coordonnées de départ de l'image d'arrière-plan. Les sprites utilisent des valeurs négatives pour décaler l'arrière-plan vers la gauche ou le haut jusqu'à l'icône cible. Par exemple, background-position: -60px 0 affiche l'icône décalée de 60 px.
background-size: Propriété CSS contrôlant la taille de rendu de l'image d'arrière-plan. La clé de l'adaptation Retina : après avoir généré un sprite à partir de sources 2x, utilisez background-size: 32px auto en CSS pour revenir à 1x et garder les écrans 1x et 2x nets.
Disposition en grille: Le mode grille de cet outil calcule automatiquement le nombre de colonnes comme la racine carrée du nombre d'icônes (arrondie au supérieur) et agence les icônes en lignes dans un carré. Neuf icônes deviennent une grille 3x3.
Padding (espace entre icônes): L'espace en pixels entre les sous-images adjacentes dans un sprite. 1 à 5 px est recommandé pour éviter la bavure des pixels de bord. Le padding vit dans le sprite, tandis que le CSS n'utilise que les coordonnées précises.
Transparence PNG: Le PNG prend en charge un canal alpha, ce qui permet aux icônes d'avoir un fond transparent. La sortie du sprite conserve le format PNG, donc les icônes transparentes restent transparentes après la fusion.
Multiplexage HTTP/2: HTTP/2 traite plusieurs requêtes en parallèle sur une seule connexion, ce qui réduit une partie de l'avantage du sprite. HTTP/2 reste cependant en retrait face à un sprite combiné pour la configuration CDN, la compatibilité avec les anciens navigateurs et la compression gzip.
SVG symbol: L'élément <symbol> de SVG avec les références <use>. Toutes les icônes vivent dans un seul fichier SVG et le CSS contrôle fill, stroke et animation. Le premier choix de remplacement du sprite dans les projets modernes.
DPR (Device Pixel Ratio): Le rapport entre pixels physiques et pixels CSS. Les écrans Retina ont un DPR de 2, donc une icône CSS de 16x16 nécessite 32x32 pixels physiques. Le DPR est le paramètre central pour adapter les sprites aux écrans Retina.

Comparaison des modes de disposition du sprite

Disposition	Règle d'agencement	Usage typique
Horizontale	Icônes placées de gauche à droite sur une seule ligne	Barres de navigation, onglets, barres horizontales
Verticale	Icônes empilées de haut en bas sur une seule colonne	Menus verticaux, préfixes de liste, structures verticales
Grille	Icônes organisées en matrice carrée selon leur nombre	Usage général, meilleur choix par défaut en nombre inconnu

Valeurs de padding recommandées pour les sprites

Padding (px)	Idéal pour	Remarques
`0px`	Bords nets, icônes avec padding transparent intégré	Compacité maximale ; risque de bavure des pixels
`1-2px`	Icônes haute qualité avec une marge de sécurité minimale	Recommandé : bon équilibre compacité et stabilité
`3-5px`	Icônes classiques avec ombres ou contours	Distance sûre, standard de l'industrie
`6-10px`	Icônes de tailles très différentes ou avec contours	Empêche les grandes icônes de masquer les petites
`10-50px`	Débogage ou regroupement visuel	Déconseillé en production

Référence d'adaptation du sprite Retina 2x

DPR d'écran	Taille CSS	Taille du fichier source	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Mise en œuvre des sprites d'images en CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> et <use>
ReferenceWeb.dev - Remplacer des images par des CSS sprites
ReferenceWikipédia - Sprite (infographie)