Générateur de sprite CSS en ligne gratuit — Combinez des images et générez du CSS automatiquement
Créez des feuilles de sprite CSS optimisées à partir de plusieurs images avec notre générateur de sprite en ligne gratuit. Téléchargez vos icônes ou images, choisissez une direction de disposition (horizontale, verticale ou grille), définissez le remplissage, et obtenez instantanément une feuille de sprite combinée ainsi que le code CSS exact avec les positions d'arrière-plan correctes. Les sprites CSS réduisent les requêtes HTTP en regroupant plusieurs petites images en une seule, améliorant la vitesse de chargement de votre site web. Parfait pour les jeux d'icônes, les éléments d'interface et les états de boutons. Tout le traitement s'effectue localement dans votre navigateur.
Téléchargez plusieurs images (icônes, boutons ou éléments d'interface) pour les combiner en une seule feuille de sprite.
Choisissez une direction de disposition (horizontale, verticale ou grille) et ajustez le remplissage entre les images.
Prévisualisez la feuille de sprite, copiez le code CSS généré et téléchargez l'image du sprite.
Conseils pour créer des sprites CSS
- Utilisez des images de taille similaire pour de meilleurs résultats. De grandes différences de taille peuvent rendre le positionnement moins prévisible.
- La disposition en grille est idéale pour les jeux d'icônes de tailles uniformes. La disposition horizontale fonctionne bien pour les états de boutons et les éléments de navigation.
- Conservez un remplissage d'au moins 2-4px entre les images pour éviter les chevauchements visuels lors de l'utilisation du sprite en production.
Questions fréquentes — Générateur de sprite CSS
Qu'est-ce qu'un sprite CSS ?
Un sprite CSS est un fichier image unique qui combine plusieurs petites images (icônes, boutons, etc.) en une seule. En utilisant background-position en CSS, vous n'affichez que la partie de la feuille de sprite dont vous avez besoin. Cela réduit les requêtes HTTP et améliore la vitesse de chargement des pages.
Le générateur de sprite CSS est-il gratuit ?
Oui, totalement gratuit. Aucune inscription, aucun frais caché et aucun filigrane. Tout le traitement s'effectue localement dans votre navigateur.
Quels formats d'image sont pris en charge ?
L'outil prend en charge tous les formats d'image courants, y compris JPG, PNG, WebP, GIF, BMP, AVIF, SVG et plus encore. PNG est recommandé pour les sprites afin de préserver la transparence.
Comment utiliser le code CSS généré ?
Copiez le code CSS et collez-le dans votre feuille de style. Placez l'image du sprite téléchargée dans le dossier des assets de votre projet et mettez à jour le chemin de l'URL background-image pour qu'il corresponde à la structure de votre projet.
Quelle disposition choisir ?
La disposition horizontale place les images en ligne — idéale pour les états de boutons et les éléments de navigation. La disposition verticale les empile — parfaite pour les menus déroulants et les listes. La disposition en grille les organise en une grille compacte — idéale pour les jeux d'icônes de tailles uniformes.
L'outil prend-il en charge les images haute DPI (Retina) ?
L'outil préserve les dimensions originales de vos images. Pour le support Retina, téléchargez des images en taille 2× et utilisez background-size en CSS pour les réduire dans votre feuille de style.
Puis-je réorganiser les images dans le sprite ?
Les images sont disposées dans l'ordre de téléchargement. Pour changer l'ordre, supprimez et retéléchargez-les dans l'ordre souhaité.