Images · Planche de sprites

Créer une feuille de sprites CSS sur Mac

Regroupez des icônes dans une seule image avec le CSS pour afficher chacune, plus un aperçu HTML.

S’exécute sur votre Mac

Demander à l’IAChatGPTClaudePerplexityMode IAGrokMarkdown

Télécharger OneMacTools Plus d’outils Images

Planche de sprites sur un Mac

Planche de sprites avec des fichiers d’exemple et ses options

Ce que Planche de sprites a produit à partir des fichiers d’exemple

Captures d’écran de l’app, avec des fichiers d’exemple.

Comment utiliser Planche de sprites

1
Déposez vos icônes
Ajoutez au moins deux images. Chaque nom de fichier devient une classe CSS : nommez-les bien d’abord, par exemple « search.png » et « cart.png ».
2
Réglez l’espacement et le préfixe
Choisissez l’espacement entre les icônes et le préfixe de classe CSS.
3
Marquer les icônes Retina
Si vos icônes sont en @2x, activez l'option Retina pour qu'elles s'affichent à mi-taille, bien nettes.
4
Cliquez sur Créer la feuille
Les icônes sont regroupées en lignes et enregistrées dans sprite.png, avec sprite.css et une page preview.html, dans un dossier daté de Téléchargements › OneMacTools.
5
Utilisez-le sur votre site
Placez sprite.png et sprite.css ensemble, liez le CSS et ajoutez les classes aux éléments. Ouvrez preview.html pour voir toutes les classes.

Ce que fait Planche de sprites

Les icônes de toutes tailles sont regroupées de façon compacte en lignes, chacune reçoit sa propre classe CSS avec la bonne position et la bonne taille, et une page d'aperçu les affiche toutes. Réglez l'espace entre les icônes, le préfixe de classe, et indiquez si les icônes sont en @2x pour les écrans Retina.

Idéal pour

Charger un jeu d'icônes en une seule requête
Créer une feuille de sprites pour un jeu
Regrouper des drapeaux ou des emoji pour un site web

Options expliquées

Espace entre les icônes: 0, 2, 4 ou 8 px ; 2 px par défaut. Un petit espacement évite que les icônes voisines débordent quand la page est agrandie.
Icônes en @2x (affichées à moitié taille pour les écrans Retina): Désactivé par défaut. Une fois activé, le CSS affiche chaque icône à la moitié de sa taille en pixels et met la planche à l’échelle en conséquence : les icônes en double résolution sont nettes sur les écrans Retina.
Préfixe de classe CSS: Le début de chaque nom de classe ; « icon » si laissé vide. Avec le préfixe icon, « search.png » devient .icon-search.

Bonnes pratiques

Avant de commencer, nommez les fichiers en minuscules avec des tirets. Les noms de classe en découlent, et « @2x » est retiré automatiquement.
Utilisez des icônes à fond transparent pour que la planche fonctionne sur n’importe quelle couleur de page.
Créez des icônes Retina exactement au double de la taille d'affichage, avec des tailles en pixels paires, pour que les tailles divisées par deux tombent sur des pixels entiers.
Compressez ensuite sprite.png avec Compresser un PNG ; un PNG à palette est souvent bien plus léger pour les planches d’icônes.
Prévoyez un espacement d’au moins 2 px si les icônes doivent être mises à l’échelle ou affichées sur une page zoomée.

Fonctionne avec

Dans: Deux images ou plus, généralement des icônes PNG, de toutes tailles.
Sortie: sprite.png (toutes les icônes réunies), sprite.css (une classe par icône avec sa taille et sa position) et preview.html.

Les icônes de tailles différentes sont regroupées de façon compacte en lignes, les plus hautes d'abord.
Les fichiers portant le même nom reçoivent des classes numérotées, comme -2, pour qu'aucun ne se perde.

Questions sur Planche de sprites

Qu’est-ce qu’une planche de sprites CSS ?

Une image qui contient de nombreuses icônes, avec un CSS qui n’en affiche qu’une par élément en décalant l’arrière-plan. Toutes vos icônes se chargent en une seule requête.

Comment utiliser le sprite sur mon site web ?

Mettez sprite.png et sprite.css en ligne dans le même dossier, liez le CSS dans votre page et ajoutez des classes comme class="icon icon-search" à un élément.

Comment les noms de classe sont-ils créés ?

D'après le nom de chaque fichier, en minuscules avec les espaces et symboles transformés en tirets, après votre préfixe. « Shopping Cart.png » avec le préfixe icon devient .icon-shopping-cart.

Puis-je utiliser des icônes de tailles différentes ?

Oui. Chaque icône garde sa propre taille, et sa classe CSS reçoit la largeur et la hauteur correspondantes.

Comment rendre les sprites nets sur les écrans Retina ?

Créez les icônes au double de leur taille d’affichage et activez l’option @2x. Le CSS les affiche alors à moitié taille, ce qui les rend nettes sur les écrans haute résolution.

Puis-je l’utiliser pour des sprites de jeu ?

Oui. sprite.css indique la position et la taille de chaque image sur la planche, que vous pouvez lire dans un moteur de jeu ou du code canvas.

Planche de sprites envoie-t-il mes fichiers en ligne ?

Non. Planche de sprites s’exécute entièrement sur votre Mac : vos fichiers ne le quittent jamais et l’outil fonctionne hors ligne.

Planche de sprites va-t-il modifier mes fichiers originaux ?

Non. Les résultats sont enregistrés comme nouveaux fichiers dans un dossier daté dans Téléchargements › OneMacTools, et vos originaux restent exactement tels quels, sauf si vous activez une option qui indique le contraire.

De quoi Planche de sprites a-t-il besoin ?

Simplement un Mac sous macOS 26 ou ultérieur. Rien d'autre à installer.