Batch Générateur de Sprites CSS
Combinez plusieurs icônes ou images en un seul fichier pour réduire les requêtes HTTP et accélérer votre site web. Générez automatiquement un code CSS parfait.
Déposer des icônes ici pour générer des sprites
Prend en charge PNG, JPG, WebP, AVIF. Combinez plusieurs images en une seule feuille de sprite CSS.
Essayer avec des Exemples
Galerie chargée
Sprite Studio
Aperçu de la feuille de sprites
Icônes individuelles
| Icône | Nom de classe | Position | Taille | Action |
|---|
Options de sprite
Appliquer par lot
Régénération automatique lors des modifications
Génération professionnelle de sprites CSS
Optimisez vos ressources web en combinant plusieurs petites images en une seule feuille de sprites. Réduisez la latence, économisez de la bande passante et simplifiez votre flux de travail CSS.
Améliorer la vitesse du site
Moins de requêtes HTTP signifie des chargements de page plus rapides. En fusionnant 50 icônes en une seule feuille de sprites, vous éliminez 49 allers-retours vers le serveur.
CSS généré automatiquement
Plus besoin de compter manuellement les pixels. Notre outil calcule automatiquement les positions et dimensions de l'arrière-plan pour chaque icône de votre feuille.
Dispositions intelligentes
Choisissez entre des dispositions de grille verticale, horizontale ou optimisée. Ajustez le remplissage pour éviter les « débordements » entre les icônes lors de la mise à l'échelle.
Comment créer une feuille de sprite CSS
Téléchargez vos icônes
Glissez-déposez toutes les petites images ou icônes que vous souhaitez fusionner. Nous prenons en charge PNG, JPG, WebP et AVIF.
Configurer les paramètres du sprite
Choisissez le style de mise en page, ajustez les marges internes et définissez votre préfixe de classe CSS. L'aperçu se met à jour instantanément.
Exporter le Sprite et le CSS
Télécharger la feuille de sprite finale et le code CSS correspondant sous forme de fichier ZIP. Il suffit de copier-coller dans votre projet.
Foire Aux Questions
Pourquoi devrais-je utiliser des sprites CSS ?
Les sprites CSS sont une technique classique d'optimisation des performances. Ils réduisent le nombre de requêtes HTTP, ce qui est particulièrement bénéfique sur des connexions lentes ou pour des sites avec de nombreux petits éléments comme des icônes ou des éléments d'interface utilisateur.
Quelle mise en page dois-je choisir ?
Les dispositions verticale et horizontale sont les plus faciles à déboguer. La disposition en grille est la plus efficace pour minimiser la surface finale de l'image et la taille du fichier.
Qu'en est-il des écrans haute densité de pixels (Retina) ?
Vous pouvez générer une feuille de sprites avec des icônes de double taille et utiliser "background-size" dans votre CSS pour la réduire afin d'obtenir un rendu net sur les écrans à haute densité de pixels.