je suis tombé par hasard sur un site qui propose de vous générer des sprites CSS trés facilement: http://csssprites.com/
Mais d'abord, sprites CSS, c'est quoi??
Les « sprites css » consistent à regrouper un ensemble d’éléments visuels dans un même fichier afin d’y faire référence de manière uniforme et d’épargner des requêtes multiples au serveur. Le découpage se fait au niveau du css notamment avec la propriété « background-position ».
la grande utilité de cette méthode, est LA PERFORMANCE!!
en effet, le temp de réponse d'un site internet, dépend de beaucoup de paramètres: la nature des script coté serveur , La taille des pages web , le nombre d'élement sur cette dernière ....
sachant que le download de chaque image passe par une requete HTTP, avoir 100 images déclenchera 100 requetes HTTP..... à multiplier par le nombre de visiteur!! bref vous l'avez compris, le plus on a d'image sur le site, le plus lent est le temps de réponse!!
le principe de base est donc de regrouper toutes les images dans une seul, et de la découper grâce au CSS!!! le nombre de requête http sur le serveur se verra naturellement diminué! :)
pour plus de détail voir: http://francoislajoie.com/blog/2009/07/24/css-sprites-cest-quoi-comment-ca-marche/
Revenons a notre outil, Pour faire cette tâche, il y a 2 catégories de personnes:
1. Les fortiches du photoshop et autre outil de traitement d'images
2. Les Autres (comme moi :) :p )
les 1er, intégrerons les images une à une, et utiliserons les grilles pour pouvoir avoir facilement les coordonnés !!!!
personnellement, j'estime que avoir recours à cette méthode n'est nécessaire que dans certain cas particulier!!dans la majorité des cas, un outil comme http://csssprites.com/ suffit largement.
comment ça marche? il suffit de:
1. se rendre sur http://csssprites.com/
2. uploader les images que vous voulez intégrer (pour intégrer plus de 3, il faut simplement cliquer sur NEED More)
3. cliquer sur "GENERATE!"
4. télécharger l'image en cliquant sur download sprite PNG.
5. récupérer les coordonné à utiliser dans le CSS, à partir du tableau "To display this image... ...use this style"
et vola le tour est joué :)
Mais d'abord, sprites CSS, c'est quoi??
Les « sprites css » consistent à regrouper un ensemble d’éléments visuels dans un même fichier afin d’y faire référence de manière uniforme et d’épargner des requêtes multiples au serveur. Le découpage se fait au niveau du css notamment avec la propriété « background-position ».
la grande utilité de cette méthode, est LA PERFORMANCE!!
en effet, le temp de réponse d'un site internet, dépend de beaucoup de paramètres: la nature des script coté serveur , La taille des pages web , le nombre d'élement sur cette dernière ....
sachant que le download de chaque image passe par une requete HTTP, avoir 100 images déclenchera 100 requetes HTTP..... à multiplier par le nombre de visiteur!! bref vous l'avez compris, le plus on a d'image sur le site, le plus lent est le temps de réponse!!
le principe de base est donc de regrouper toutes les images dans une seul, et de la découper grâce au CSS!!! le nombre de requête http sur le serveur se verra naturellement diminué! :)
pour plus de détail voir: http://francoislajoie.com/blog/2009/07/24/css-sprites-cest-quoi-comment-ca-marche/
Revenons a notre outil, Pour faire cette tâche, il y a 2 catégories de personnes:
1. Les fortiches du photoshop et autre outil de traitement d'images
2. Les Autres (comme moi :) :p )
les 1er, intégrerons les images une à une, et utiliserons les grilles pour pouvoir avoir facilement les coordonnés !!!!
personnellement, j'estime que avoir recours à cette méthode n'est nécessaire que dans certain cas particulier!!dans la majorité des cas, un outil comme http://csssprites.com/ suffit largement.
comment ça marche? il suffit de:
1. se rendre sur http://csssprites.com/
2. uploader les images que vous voulez intégrer (pour intégrer plus de 3, il faut simplement cliquer sur NEED More)
3. cliquer sur "GENERATE!"
4. télécharger l'image en cliquant sur download sprite PNG.
5. récupérer les coordonné à utiliser dans le CSS, à partir du tableau "To display this image... ...use this style"
et vola le tour est joué :)