Freebies hebdomadaires: 12 générateurs de sprites CSS gratuits
Les sprites d'images CSS vous permettent de réduire considérablement le nombre de requêtes HTTP sur un site en combinant plusieurs ou toutes les images de votre site dans un seul fichier. Ce fichier peut ensuite être utilisé en conjonction avec le positionnement d'arrière-plan CSS pour implémenter des images individuelles.
L'inconvénient de cette technique est que c'est un processus minutieux et complexe qui vous oblige à combiner manuellement vos images et à jouer avec le CSS pour que chaque image s'affiche correctement. Heureusement, il existe un certain nombre d'outils en ligne gratuits qui automatisent complètement ce processus. Aujourd'hui, nous avons une impressionnante collection de douze de ces outils, chacun avec sa propre approche unique du processus de génération de sprites. Que vous cherchiez à créer un sprite à partir d'un dossier d'images ou à convertir un site existant, nous avons les outils pour vous aider à faire le travail en quelques secondes.
Générateur CSS Sprite: 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 s'occupe du reste. Il crache une image et toutes les différentes valeurs de «position d'arrière-plan» dont vous avez besoin.
Générateur CSS Sprites
Moche et bogué, ce générateur de sprites vous oblige à télécharger chaque image individuellement. Essayez-le pour voir ce que vous en pensez, mais honnêtement, il existe de meilleures alternatives sur cette liste.
CSS Sprites - Générateur / générateur CSS Sprite en ligne
Celui-ci est plutôt sympa. Vous pouvez facilement télécharger un tas d'images à la fois, choisir votre type de fichier de sortie et même choisir d'obtenir le code Sass et CSS en conséquence. Il existe également des options intéressantes pour générer automatiquement des effets de survol tels que désaturés et inversés. Dans l'ensemble assez impressionnant, assurez-vous de le vérifier.
Spritebox - Créer du 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 sprites dans Photoshop et que vous voulez juste de l'aide avec le code.
Canevas: Générateur de sprites CSS
Si vous téléchargez des images pour celle-ci, vous devez le faire une à la fois, 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 le rembourrage et les couleurs d'arrière-plan. Cela a bien fonctionné dans mes tests, ça vaut vraiment le coup d'oeil.
Stitches - Un générateur de feuilles de sprites HTML5
Celui-ci vous permet de faire glisser des images, ce qui est génial après avoir utilisé tous les déchargeurs maladroits que d'autres développeurs ont imaginés. Après cela, vous pouvez simplement cliquer sur un bouton pour obtenir l'image et un autre pour récupérer 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 rapide et simple.
Spritemapper
Celui-ci est réservé aux super nerds, c'est un générateur de sprites téléchargeable que vous exécutez à partir de la ligne de commande. L'implémentation est cependant très simple, vous la pointez simplement sur votre fichier CSS existant et elle fait le reste du travail. Cela rend le problème de la gestion à long terme des sprites un jeu d'enfant car vous pouvez simplement vous accrocher à vos fichiers css et image d'origine et les retraiter en cas de changement.
SpriteMe
SpriteMe est un outil génial qui vous permet de garder complètement intact votre processus de développement typique. Créez simplement votre page comme vous le feriez normalement en utilisant 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 de la page, crée un sprite et génère le CSS. Ceci est particulièrement utile si vous convertissez un site sortant.
Spritefy
Spritefy est une autre option qui vous permet de simplement faire glisser un tas de fichiers dans le navigateur pour les traiter. Comme avec Stitches, il n'y a vraiment pas d'options, mais c'est certainement un moyen super rapide de se lancer avec les sprites (Chrome et Firefox uniquement).
Générateur CSS Sprite
Celui-ci a 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 a une tonne de code, y compris CSS et HTML, ainsi que divers extraits pour ajouter chaque image à un div ou span, l'insertion de liens, etc.
SpriteMeister - Générateur automatique de sprites CSS
SpriteMeister ressemble beaucoup à 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 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-objet que vous avez créée ailleurs et utilisez un processus de sélection simple pour générer automatiquement le CSS approprié pour chaque image.
Aimer? Partagez-le!
Si vous avez apprécié la collection de cadeaux de cette semaine, partagez votre 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
