Stiches - Un générateur de sprites d'images en HTML5 et jQuery

Stiches est un script jQuery / HTML5 permettant de générer facilement vos sprites d'images accompagnés de leur CSS.

Les sprites d'images permettent aux navigateurs de vos visiteurs de ne télécharger qu'une image unique au lieu d'une trentaine limitant ainsi les requêtes HTTP et accélérant le chargement de votre page web.

La réalisation de ce sprite peut être faite à la main pour optimiser les espaces et le poids de l'image, mais la tâche reste fastidieuse, notamment lorsqu'il faut ajouter ou mettre à jour des images...

Stiches propose un outil en HTML5 (Comprenez navigateurs récents) permettant de drag and drop une liste d'images depuis son disque pour upload puis de générer le sprite et le CSS qui l'accompagne automatiquement:

Le plugin est open source et peut donc être utilisé dans vos projets web etc.

Il est aussi intéressant de faire un tour sur le code de la ressource pour s'inspirer du fonctionnement pour l'upload drag and drop HTML5 par exemple.

Et pour les plus matheux d'entre vous, pourquoi pas proposer un algorithme de placement des images encore plus optimisé pour réduire le poids du sprite généré.

Côté dépendances, le script requiert jQuery 1.6.2+, Modernizr, Dropfile, Flashcanvas notamment pour les fallbacks avec les anciens navigateurs.

Site Officiel