Générateur de sprites CSS
Générateur de CSS sprite gratuit en ligne
Qu'est-ce qu'un sprite CSS ?
Un sprite CSS combine plusieurs petites images en un seul fichier image (feuille de sprite). La propriété CSS background-position est ensuite utilisée pour afficher les images individuelles depuis le fichier combiné. Cela réduit le nombre de requêtes HTTP, améliorant les performances de chargement de la page.
Comment créer un sprite CSS
Téléchargez plusieurs images. Choisissez une mise en page (horizontale, verticale ou grille). L'outil les combine en une seule feuille de sprite et génère le CSS avec les valeurs background-position pour chaque image.
▶Les sprites CSS sont-ils encore utiles ?
Avec le multiplexage HTTP/2, l'avantage de performance des sprites a diminué. Cependant, les sprites aident encore lors du service de nombreuses petites icônes ou avec des systèmes d'icônes nécessitant une mise en cache en fichier unique.
▶Quelle est la meilleure mise en page pour les sprites ?
La mise en page horizontale est compacte pour peu d'images. La mise en page en grille fonctionne bien pour beaucoup d'icônes de taille similaire. La mise en page verticale est utile quand toutes les images ont la même largeur.
▶Comment utiliser le CSS généré ?
Le CSS utilise background-image sur la feuille de sprite et background-position pour chaque icône. Appliquez les classes générées à vos éléments HTML.