Un sprite, c'est une image qui regroupe toutes les images dont on a besoin pour agrémenter son thème graphique pour son site web. C'est utile, notamment pour réduire drastiquement le nombre de requêtes au serveur. Pour générer ses propres sprites, on utilise généralement un logiciel comme Gimp ou Photoshop, mais il faut alors calculer soi-même les positions des images pour créer sa feuille de style.

Toutefois, des générateurs en ligne existent, comme Spritebox ou comme celui de Matthew Cobbs qui a été réalisé entièrement en html5 et jQuery et proposé en plus en open-source. Il faut donc un navigateur récent et moderne, comme Firefox ou Chromium pour pouvoir l'utiliser mais l'avantage par rapport à un logiciel graphique, c'est que son script va aussi proposer le code CSS avec, pour gagner pas mal de temps lors du développement..

On peut donc installer son script qu'il a nommé Stitches, sur un serveur local, mais une version de démonstration fonctionnelle est disponible aussi en ligne.

Pour utiliser Stitches, c'est très simple ; il faut juste déplacer les images dans le script, et il va générer automatiquement tout le reste. On peut aussi, dans les options, mettre un intervalle pour les espaces entre les images. Une fois toutes les images ajoutées, il ne reste donc plus qu'à télécharger notre nouveau sprite ainsi que le code CSS auto-généré via les boutons dédiés.