Google Code : Réalisez vos Sprites CSS avec SpriteMe

L’utilisation de sprites CSS rend le chargement des pages Web plus rapide, mais on peut perdre des heures à les créer. Les néophytes de cette technique avancée d’optimisation des performances font donc face à ce défi décourageant en tentant de saisir la logique nécessaire pour convertir les images de leur page Web en un hommage “spritifié” à la performance Web. La barre ne doit pas être si haute.

SpriteMe est un projet open source qui permet aux développeurs Web de créer des sprites CSS en quelques minutes plutôt qu’en plusieurs heures. Ses principales caractéristiques sont les suivantes:

• Il identifie les images de votre site
• Il regroupe ces images dans des sprites
• Il génère l’image du sprite
• Il recalcule les positions CSS des images
• Et enfin il injecte le sprite dans le code de votre page

SpriteMe est un bookmarklet JavaScript, il fonctionne donc dans tous les principaux navigateurs. Il convertit la page Web de façon à utiliser des sprites pendant que vous suivez  l’avancement du processus, ce qui facilite la vérification du résultat visuel. Il vous permet de faire des glisser-déposer pour réorganiser les suggestions de sprite à votre façon. Ou sinon, plus simplement, vous pouvez accepter toutes les suggestions de SpriteMe en un clic sur le bouton “make all”. Quand tout ceci est fait, enregistrez simplement l’image (ou les images) sprite sur votre serveur et intégrez les modifications de styles CSS dans vos feuilles de style. Essayez le tutoriel pour voir SpriteMe en action.

Rédigé dans sa version originale par Steve Souders, Evangeliste Performance

Note de florentM : SpriteMe est un projet indépendant hébergé sur la plateforme Google Code