Générateur de Sprites CSS Gratuit

Le Générateur de Sprites est un outil en ligne gratuit qui combine plusieurs images en une seule feuille de sprites accompagnée du code CSS correspondant pour optimiser le web.

Oui, il est entièrement gratuit et ne nécessite aucune inscription. Toute la génération de sprites se fait côté client, dans votre navigateur.

Les sprites CSS réduisent les requêtes HTTP en combinant plusieurs images en un seul fichier, ce qui améliore la vitesse de chargement de la page et les performances globales du site web.

Absolument. Le Générateur de Sprites CSS traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, le Générateur de Sprites CSS est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucune application à télécharger.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le Générateur de Sprites CSS dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'usage.

Le Générateur de Sprites CSS prend en charge les formats d'image courants, dont PNG, JPG/JPEG, WebP et GIF. Certaines fonctionnalités peuvent également prendre en charge SVG et BMP selon l'outil spécifique.

Saisissez simplement votre contenu dans le champ prévu, ajustez les paramètres selon vos préférences et l'outil le traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

Le Générateur de Sprites CSS fonctionne sur tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

La disposition détermine comment vos images sont agencées sur la planche, ce qui influe sur sa taille finale. Horizontal aligne chaque image sur une seule ligne, et vertical les empile en une seule colonne — les deux sont simples et prévisibles, mais peuvent gaspiller de l'espace quand les tailles d'image varient. Grille place les images dans des cellules uniformes avec un nombre de colonnes que vous choisissez, ce qui reste lisible quand les icônes sont de tailles similaires. Compact est l'option la plus intelligente : elle utilise un bin packing par étagères, triant les images par hauteur et les faisant tenir dans le plus petit rectangle raisonnable, ce qui produit généralement la planche la plus compacte et le fichier le plus léger. Si vos icônes ont des tailles très variées, commencez par compact ; si vous voulez un ensemble propre et régulièrement espacé, utilisez grille. Essayez plusieurs dispositions ci-dessus et comparez les dimensions de la planche générée avant de valider votre choix.

Une sprite sheet est une seule image contenant de nombreux petits graphismes, et la propriété CSS background-position décale cette image derrière une boîte de taille fixe pour ne rendre visible que le fragment souhaité. Chaque classe générée définit la planche comme arrière-plan, fixe la largeur et la hauteur de l'élément aux dimensions de l'icône, puis décale l'image avec des coordonnées négatives — par exemple, background-position: -48px -16px déplace la planche vers le haut et la gauche pour que l'icône située à cet endroit tombe exactement dans la boîte. Le navigateur charge la planche complète une seule fois et la réutilise pour chaque icône, ce qui permet à une seule requête de servir des dizaines de graphismes. Cet outil calcule ces décalages exacts pour vous, en nommant une classe par fichier source afin que vous n'ayez qu'à ajouter la classe à un élément. Générez votre planche ci-dessus pour obtenir le code de positionnement prêt à coller.

Les écrans rétina, ou à haute densité de pixels, regroupent deux ou trois pixels physiques dans chaque pixel CSS, si bien qu'un sprite standard peut paraître flou sur ces écrans. Activer le mode rétina génère des versions @2x et @3x de votre planche, à double et triple résolution, en plus de la version normale, et écrit les media queries min-resolution correspondantes dans le CSS afin que chaque appareil charge automatiquement la planche la plus nette dont il a besoin. Activez cette option lorsque vos icônes doivent rester nettes sur les smartphones, tablettes et ordinateurs portables haute densité modernes — ce qui concerne la plupart des sites en production aujourd'hui. La contrepartie est des fichiers plus lourds, puisque les assets @3x représentent neuf fois la surface en pixels ; pour des graphismes purement décoratifs ou rarement affichés, la planche standard suffit souvent. Cochez l'option rétina ci-dessus et l'outil se charge des planches et media queries supplémentaires.

En plus du CSS, le générateur produit un manifeste JSON au format hash de TexturePacker, qui enregistre le nom, la position et la taille de chaque frame sur la planche. Les moteurs de jeu et de rendu canvas lisent cet atlas pour découper des frames individuelles à partir d'une seule texture au moment de l'exécution, au lieu de charger de nombreuses images séparées. Ce format est compatible avec Phaser, PixiJS et d'autres bibliothèques acceptant les atlas de sprites en JSON, ce qui vous permet de charger la planche et le manifeste ensemble et de référencer les frames par leur nom de fichier d'origine. Cela rend l'outil utile au-delà du simple CSS web — il fonctionne pour les visuels de jeux HTML5, les animations et les tile sets, pas seulement pour les icônes d'interface. Utilisez « Tout télécharger » ci-dessus pour récupérer la sprite sheet, votre feuille de style et le manifeste JSON en une seule étape, afin que l'atlas et l'image restent synchronisés.

Choisissez le format selon le contenu de vos sprites. PNG est sans perte et conserve une transparence totale, ce qui en fait le choix par défaut sûr pour les icônes, logos et graphismes d'interface nécessitant des contours nets ou un canal alpha. WebP offre généralement le fichier le plus léger à qualité visuelle égale tout en supportant la transparence, ce qui en fait le meilleur choix pour la performance si vous n'avez pas besoin de prendre en charge de très anciens navigateurs. JPEG convient au contenu photographique mais ne gère pas la transparence et peut produire des artefacts sur les lignes nettes, donc à éviter pour des icônes plates. Pour WebP et JPEG, l'outil propose un curseur de qualité de 10 à 100 %, permettant d'arbitrer entre poids du fichier et fidélité. Pour la plupart des ensembles d'icônes, WebP avec un réglage de qualité élevé donne un rendu net et la planche la plus légère — choisissez votre format ci-dessus et comparez la taille du résultat.