SpriteGen, accélérez le chargement des images avec CSS

SpriteGen est une application web 2.0 qui vous permet d’automatiser le processus de génération des Sprites CSS.

Les Sprites CSS sont un moyen de réduire le nombre de requêtes HTTP faites sur les ressources images de votre site. Les images sont regroupées en une seule grande image, et sont accessibles via leurs coordonnées X et Y au sein de l’image. En affectant l’image générée aux bons éléments de la page la propriété CSS background-position peut alors être utilisée afin de ne rendre visible que la zone cible de l’image Sprite.

Cette technique est utilisée afin d’améliorer les performances d’un site, le gain de performance est significatif dans beaucoup de situations notamment dans le cas où il y a beaucoup de petites images, telles que les icônes de menus. La page d’accueil de Yahoo!, par exemple, utilise exactement cette technique.

Pour générer votre sprite CSS, vous devez simplement fournir un fichier ZIP contenant au moins 2 images (GIF, PNG ou JPG) et SpriteGen génère l’image Sprite ainsi que les règles CSS associées pour afficher unitairement chaque image composant le Sprite.

L’outil possède des options que vous pouvez configurer pour modifier les caractéristiques de l’image Sprite générée ainsi que les CSS associés afin de mieux répondre aux spécificités de votre site web :

  • Redimensionner la largeur et la hauteur les images sources
  • Ignorer les images dupliquées
  • Supprimer les images dupliquées mais combiner les classes en une seule
  • Détermine l’espacement horizontal du Sprite généré
  • Détermine l’espacement vertical du Sprite généré
  • Positionne la couleur de fond de l’image résultat.
  • Format du fichier Sprite, supporte les formats GIF, PNG et JPG.
  • Options des CSS générés, le préfixage d’id et de sélecteur de classes est supporté.
  • Options des CSS générés, n’importe quelle expression régulière valide peut être utilisée.
  • Options des CSS générés, le texte entré est préfixé devant chaque nom de classe.
  • Options des CSS générés, le texte entré est suffixé à la fin de chaque règle de CSS.

Site Internet : SpriteGen
Licence : GPL

Leave a Reply