Création de sprites CSS à l'aide de msbuild?

Question

Est-ce que quelqu'un a vu des outils, ou même un concept de processus pour générer des sprites css à partir des images d'un site Web existant, et css pendant le processus de construction?

Je pense que les étapes seraient:

1. à pied un répertoire d'images
2. créer un seul fichier d'image-objet de toutes les images dans ce répertoire
3. pour chaque image
4. trouver toutes les classes CSS en utilisant cette image
5. mettre à jour la classe css pour utiliser le nouveau fichier sprite

Je vais utiliser asp.net donc quelque chose dans msbuild serait génial. Cependant, je trouve qu'il y en a peu qui s'en approchent.

Answer 1

Vous pouvez utiliser ce http://spritegen.website-performance.org/ qui est un code sous licence BSD. (Voir le lien de téléchargement sur le côté droit.)

Answer 2

Un processus automatique comme celui-ci ne fonctionne que si vous avez quelques images simples. Il existe plusieurs raisons de procéder manuellement:

Certains formats d'image fonctionnent mieux que d'autres pour les sprites. Si vous essayez de faire des sprites à partir d'images JPEG, la compression peut facilement saigner d'une image à l'autre, provoquant des artefacts. Les formats de couleur d'index comme GIF et PNG 8 bits ont un nombre limité de couleurs, donc si vous mettez des images avec des palettes de couleurs trop différentes, vous perdrez des couleurs.

Vous souhaiterez peut-être répéter une image horizontalement ou verticalement, ce qui rend plus difficile la combinaison de l'image-objet.

Si l'image est plus petite que l'élément dans lequel vous l'utilisez, vous devez remplir l'image avec des pixels transparents. Si la taille de l'élément est dynamique de quelque façon que ce soit, le processus automatique ne sait même pas combien de padding l'image aurait besoin.