Les générateurs de sprites CSS

Par Martin

La technique des sprites CSS est désormais éprouvée et bien documentée. Il existe de bons ressources pour les mettre en place simplement et pourtant, on en voit finalement assez peu.

Ceux qui les utilisent sont convaincus, mais l’optimisation de sites web semble toujours un truc inutile, comme l’accessibilité ou l’ergonomie…
C’est à mon sens une hérésie, et les performances, comme l’accessibilité ou l’ergonomie devraient faire partie des premières réflexion sur la plupart des projets web.

Pour vous sensibiliser à cette technique je vais donc vous présenter quelques outils utiles à sa mise en place.

Photo de Jeff Kubina depuis Flickr

Performance ?

Avant de voir comment faire voyons déjà pourquoi le faire. En deux mots, des performances de votre site web, dépendent la qualité de votre référencement et la qualité de surf de vos visiteurs. Votre rentabilité est donc en lien direct avec la rapidité de votre site.

Avant de songer à changer de serveur, il y a deux points importants à traiter pour améliorer votre site :

• Limiter le poids des données
• Limiter le nombre de données

Les sprites CSS permettent de limiter le nombre de fichiers en les combinant. Cela amène aussi en règle générale à une diminution du poids total des images.

Pour en savoir plus sur l’optimisation :

• Le blog d’Éric Daspet sur les performances
• Le billet de Webaaz sur les performances

Méthode

Pour ce qui et de la technique des sprites, je vous renvoie vers le bon tutoriel de Pompage :

• Tutoriel sur pompage
• Voir les explications sur le blog Performances

Pour l’essentiel, sachez que seules les images qui servent au design de votre site peuvent être utilisées. Les images du contenu ne doivent pas subir ce traitement !

Webwares

Pour une utilisation simplifiée on trouve pas mal d’applications web qui fournissent un outil de génération de sprites. Il suffit de fournir vos images sous forme d’archive, de préciser vos paramètres (alignement, espace entre les image, préfixes css…). Il ne vous reste plus qu’à télécharger votre image et le code CSS associé et à les intégrer dans votre site web.

En voici quelques exemples :

• Le générateur de sprites de Ryan Breen
• CSS Sprites
• Spritegen
• Csssprites

Celui-ci est un peu différent puisqu’il permet de redéfinir le style CSS à partir d’un sprite. Utile si vous faites le sprite vous même ou si vous avez perdu le code CSS !

• Générateur de syles CSS Sprite creator

software

Pour une intégration plus poussée dans votre processus d’intégration, il existe aussi des outils en ligne de commande :

• Css Sprites en Java
• Css Sprites Reloaded en Python

Vous pourrez ainsi automatiser cette tâche dans un script. Très utile si vous devez régénérer régulièrement des sprites dans le cadre d’un cycle d’intégration continue par exemple !

Il faut noter que la version Java est sous license Open Source BSD License et la version Python

Conclusion

Des outils indispensables aujourd’hui ! Vous n’aurez plus d’excuses pour ne pas les utiliser !
Et pour plus de résultats, n’oubliez pas de merger et de compresser vos fichiers CSS et de supprimer les méta données de vos images !

Sur le même thème

• Optimiser son site web
• Trouver de belles photos pour son site web
• Bien utiliser les feuilles de style (CSS)
• Internationalisation & localisation
• Les plugins Firefox : Firebug