Les images-objets d'image CSS vous permettent de réduire considérablement le nombre de demandes HTTP sur un site en combinant plusieurs ou la totalité des images de votre site dans un seul fichier. Ce fichier peut ensuite être utilisé conjointement avec le positionnement d'arrière-plan CSS pour implémenter des images individuelles.
L'inconvénient de cette technique est qu'il s'agit d'un processus fastidieux et complexe qui vous oblige à combiner manuellement vos images et à bricoler avec le CSS pour que chaque image s'affiche correctement. Heureusement, de nombreux outils en ligne gratuits automatisent complètement ce processus. Aujourd'hui, nous avons une collection impressionnante de douze de ces outils, chacun avec sa propre approche du processus de génération de sprite. Que vous cherchiez à créer une image-objet à partir d'un dossier d'images ou à convertir un site existant, nous avons les outils pour vous aider à faire le travail en quelques secondes à plat.
Générateur de sprites CSS: Project Fondue
Un bon générateur avec beaucoup d'options. Vous téléchargez un .ZIP de toutes les images que vous souhaitez transformer en sprite et il se charge du reste. Il crache une image et toutes les diverses? Position de fond? les valeurs dont vous avez besoin.
Générateur de sprites CSS
Truand et buggy, ce générateur de sprite vous oblige à télécharger chaque image individuellement. Essayez de voir ce que vous pensez, mais honnêtement, il existe de meilleures alternatives sur cette liste.
CSS Sprites - Générateur de sprites CSS en ligne
Celui-ci est assez sympa. Vous pouvez facilement télécharger plusieurs images à la fois, choisir votre type de fichier de sortie et même choisir d’obtenir le code Sass et CSS. Il existe également des options pratiques pour générer automatiquement des effets de survol, tels que désaturation et retournement. Dans l'ensemble assez impressionnant, assurez-vous de vérifier.
Spritebox - Créer un CSS à partir d'images Sprite
Celui-ci prend un itinéraire différent, légèrement moins automatisé. Au lieu de créer une image de sprite pour vous, il vous permet de télécharger votre sprite déjà créé et de définir des zones spécifiques pour générer le CSS résultant. Un excellent outil si vous préférez créer des images-objets dans Photoshop et souhaitez simplement obtenir de l'aide pour le code.
Canvas: Générateur de sprites CSS
Si vous téléchargez des images pour celui-ci, vous devez le faire une par une, ce qui est un peu pénible. Si vous avez des liens, vous pouvez simplement coller une liste avec les noms de classe correspondants et vous êtes prêt à partir. Les options incluent les couleurs de remplissage et d'arrière-plan. Cela a bien fonctionné lors de mes tests et mérite certainement un coup d'oeil.
Stitches - Un générateur de feuilles de sprite HTML5
Celui-ci vous permet de faire glisser des images, ce qui est génial après avoir utilisé tous les déchargeurs gênants que d'autres développeurs ont mis au point. Après cela, vous pouvez simplement cliquer sur un bouton pour obtenir l'image et un autre pour saisir le CSS. Il n'y a pratiquement aucune option et cela ne fonctionne que dans Chrome et Firefox, mais c'est parfait si vous voulez juste une solution simple et rapide.
Spritemapper
Celui-ci est réservé aux super-nerds, c'est un générateur de sprite téléchargeable que vous exécutez à partir de la ligne de commande. L’implémentation est très simple, il vous suffit de la pointer sur votre fichier CSS existant et d’effectuer le reste du travail. Cela simplifie énormément le problème de la gestion des images-objets à long terme, car vous pouvez simplement conserver vos fichiers css et images d'origine et les traiter à nouveau en cas de modification.
SpriteMe
SpriteMe est un outil formidable qui vous permet de garder totalement intacte votre processus de développement typique. Construisez simplement votre page comme vous le feriez normalement avec des images individuelles. Ensuite, une fois que vous avez terminé, ouvrez la page dans un navigateur et appuyez sur le bookmarklet SpriteMe. Cela saisit toutes les images sur la page, crée un sprite et génère le CSS. Ceci est particulièrement utile si vous convertissez un site existant.
Spritefy
Spritefy est une autre option qui vous permet de faire simplement glisser un groupe de fichiers dans le navigateur pour les traiter. Comme avec Stitches, il n'y a pas vraiment d'options, mais c'est vraiment un moyen très rapide de se familiariser avec les sprites (Chrome et Firefox uniquement).
Générateur de sprites CSS
Celui-ci comporte quelques étapes inutiles dans le processus de génération et de configuration. Il prend donc quelques secondes de plus que la plupart des autres alternatives, mais il contient une tonne de code comprenant CSS et HTML, ainsi que divers extraits permettant d'ajouter chaque image à une div ou span, insertion de liens, etc.
SpriteMeister - Générateur de sprites CSS automatique
SpriteMeister est un peu comme SpriteMe ci-dessus, mais moins automatisé. Au lieu d'utiliser un bookmarklet, vous téléchargez manuellement chaque image et votre fichier CSS actuel, puis vous recevez un téléchargement avec le code mis à jour et une seule image.
Sprite Creator 2.0
Celui-ci fonctionne exactement comme Spritebox ci-dessus. Vous téléchargez l'image de l'image-objet créée ailleurs et utilisez un processus de sélection simple pour générer automatiquement le code CSS approprié pour chaque image.
Aimer? Partagez-le!
Si vous avez apprécié la collection de cadeaux de cette semaine, partagez l'amour et envoyez un lien sur vos sites préférés. Voici un extrait pratique à copier et coller à votre guise!
12 générateurs de sprites CSS gratuits: http://goo.gl/NhLNR