DevToolPal
FR

Générateur de sprites CSS

Assemblez des icônes dans une seule planche de sprites PNG et obtenez les classes CSS background-position de chaque image.

Traitement local, rien n'est envoyé

Options

Images sources

Images (0)

Ajoutez des images PNG, SVG, GIF ou JPG. Rien n'est envoyé.

Sprite

CSS

À quoi sert cet outil

Le générateur de sprites CSS assemble un ensemble d’icônes ou de petites images en une seule planche de sprites et écrit le CSS pour afficher chacune d’elles. Ajoutez des fichiers PNG, SVG, GIF ou JPG, choisissez leur disposition, puis téléchargez le sprite PNG accompagné d’une feuille de style avec une classe par image.

Les noms de classe viennent des noms de fichiers : Home Icon.png devient .icon-home-icon, et les noms en double reçoivent un numéro. La disposition Compacte utilise un algorithme de bin packing pour placer des images de tailles différentes sur la planche la plus petite possible ; Verticale, Horizontale et Grille donnent des positions prévisibles.

Mode d’emploi

  1. Cliquez sur Ajouter des images… et sélectionnez vos icônes (ou partez du jeu d’exemple).
  2. Choisissez une Disposition et une Marge. Un peu de marge empêche les icônes voisines de déborder les unes sur les autres quand le navigateur les redimensionne.
  3. Définissez le Préfixe de classe et le Nom du fichier sprite utilisé dans background-image.
  4. Choisissez @2x si vos images sont dessinées en taille double pour les écrans Retina.
  5. Cliquez sur Télécharger le PNG et Télécharger le CSS (ou Copier l’image pour coller le sprite dans un outil de design ou une messagerie), mettez les deux fichiers en ligne et utilisez les classes : <span class="icon icon-home"></span>.

Exemple

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Astuces

  • Regroupez dans un même sprite les icônes qui évoluent ensemble : régénérer la planche change toutes les positions.
  • Pour des icônes monochromes dont la couleur doit changer en CSS, une police d’icônes SVG ou du SVG inline conviendra peut-être mieux.

FAQ

› Qu'est-ce qu'un sprite CSS ?

Une seule image qui en contient beaucoup de petites. Chaque icône s'affiche en donnant le sprite comme arrière-plan à un élément et en le décalant avec background-position : la page n'a besoin que d'une requête au lieu de plusieurs dizaines.

› Les sprites sont-ils encore utiles avec HTTP/2 ?

Moins qu'avant, mais ils restent pratiques pour de nombreuses petites icônes, les modèles d'e-mails, les jeux et les projets historiques, et ils évitent le clignotement des icônes qui se chargent une à une.

› À quoi sert l'option @2x ?

Si vos images sources sont dessinées au double de la taille d'affichage, le CSS divise par deux chaque largeur, hauteur et position et ajoute background-size, pour que les icônes restent nettes sur les écrans haute densité.

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

Non. Le sprite est dessiné dans votre navigateur avec un canvas et le CSS est généré localement.