Dans cet article
Que sont CSS Sprite Sheets
Un sprite sheet combine plusieurs petites images en un seul fichier image plus grand. Chaque image individuelle occupe une région définie dans la feuille. En développement web, CSS background-position est utilisé pour n’afficher que la portion du sprite sheet nécessaire pour chaque élément, réduisant les requêtes HTTP et améliorant les performances de chargement de page.
Les sprite sheets étaient essentiels dans l’optimisation des performances web à ses débuts, lorsque chaque image nécessitait une requête HTTP séparée. Même avec le multiplexage HTTP/2 moderne, les sprite sheets restent précieux pour les jeux d’icônes, les éléments d’interface et les animations de jeu où des dizaines de petites images sont utilisées ensemble et bénéficient d’un chargement en un seul fichier mis en cache.
Comment fonctionne Sprite Sheet l'outil Works
Téléversez plusieurs images, choisissez une direction de disposition et obtenez à la fois l’image du sprite sheet et le code CSS prêt à l’emploi.
- Importez votre image — glissez-déposez ou cliquez pour sélectionner un fichier JPG, PNG ou WebP depuis votre appareil
- Choisissez la disposition — sélectionnez une bande horizontale, une bande verticale ou un arrangement en grille, et configurez l’espacement entre les sprites
- Téléchargez le résultat — prévisualisez l'effet et exportez l'image traitée
Essayez gratuitement — sans inscription
Ouvrir Sprite Sheet l'outil →Quand utiliser Sprite Sheets
Les sprite sheets optimisent la livraison des ressources et simplifient les flux de travail d’animation.
- Performance web — combinez les jeux d’icônes et les éléments d’interface en un seul sprite sheet pour réduire le nombre de requêtes d’images, particulièrement bénéfique pour les sites avec de nombreuses petites icônes
- Développement de jeux — regroupez les images d’animation dans des sprite sheets pour un rendu efficace dans les jeux basés sur canvas ou animés en CSS, où les images séquentielles sont accédées par décalage de la position d’arrière-plan
- E-mail et support legacy — créez des sprite sheets pour les e-mails HTML et les environnements legacy où les techniques modernes de chargement d’images ne sont pas disponibles
Questions fréquemment posées
Quelle disposition choisir ?
Les bandes horizontales fonctionnent bien pour les images d’animation qui se jouent en séquence. Les bandes verticales conviennent aux menus et icônes de navigation. La disposition en grille est la plus efficace en espace pour les grands jeux d’icônes. L’outil génère les valeurs CSS background-position correctes quelle que soit la disposition choisie.
L’outil génère-t-il du code CSS ?
Oui. L’outil génère automatiquement du code CSS avec le décalage background-position exact pour chaque sprite dans la feuille. Vous pouvez copier le CSS directement dans votre feuille de styles et utiliser les noms de classes fournis pour afficher les sprites individuels.
Le traitement se fait-il sur un serveur ?
Non. Tout le traitement s'effectue localement dans votre navigateur via l'API Canvas. Votre image ne quitte jamais votre appareil, garantissant une confidentialité totale sans limite de taille de fichier ni temps d'attente.