CSS Sprite Generator
Combine several images into one sprite sheet and get the CSS for it.
Fusionnez de petites images comme des icônes en un seul PNG et obtenez une classe CSS pour chacune, prête pour votre projet.
Fonctionnalités
Cas d'utilisation : quand cet outil vous aide
-
Accélérer les sites riches en icônes
Regroupez des dizaines de petites icônes en une image pour réduire les requêtes HTTP.
-
Créer des feuilles de sprites de jeu
Rassemblez frames d'animation ou tuiles pour des jeux HTML5 et canvas.
-
Optimiser les modèles d'emails
Utilisez une seule image pour les icônes sociales de newsletters et signatures.
-
Maintenir des sites anciens
Générez le CSS de sprites pour des sites et navigateurs qui en dépendent.
-
Organiser des jeux d'icônes
Gardez drapeaux, badges ou étoiles de notation dans un seul fichier.
-
Apprendre la performance front-end
Les étudiants voient concrètement comment fonctionnent sprites et background-position.
Comment Utiliser
- Ajoutez vos images.
- Choisissez la disposition, l'espacement et le préfixe.
- Téléchargez le ZIP et liez le CSS.
FAQ
Comment les classes sont-elles nommées ?▾
À partir du nom de fichier et de votre préfixe, comme sprite-home.
Mes images sont-elles envoyées ?▾
Non. Le sprite est créé dans votre navigateur.