Share
L'utilisation de sprites CSS, au lieu d'une collection d'images individuelles plus petites, améliorera les performances de vos pages Web et vous permettra de mieux organiser vos tâches. Jetons un coup d'œil à certaines meilleures pratiques et à quelques outils utiles pour votre flux de production de sprites.
Le nom lutin pourrait vous rappeler des sprites de jeu; jeux de console rétro et même des jeux sur navigateur ces jours-ci:
et en termes CSS, le rôle joué par les sprites est plus ou moins le même. Une image-objet est un fichier volumineux contenant plusieurs images pour votre site Web, permettant ainsi d'économiser du temps de chargement et de l'espace Web..
L’intérêt essentiel de l’utilisation des feuilles de sprite CSS est que le serveur n’a plus qu’à envoyer un fichier image contenant toutes vos images, et non une multitude d’images individuelles. Par le biais de CSS, vous pouvez afficher n’importe quel petit segment de ce fichier en arrière-plan d’un élément..
Certains voudraient que l'utilisation d'images individuelles puisse "tromper" l'œil en lui faisant croire que la page se charge plus rapidement; les images apparaissant à mesure qu'elles se chargent peuvent sembler être de bons progrès. Ceci est un faux avantage, cependant, une page de chargement réellement plus rapide est toujours préférable..
L’autre inconvénient de cette méthode est que chaque image est, comme nous l’avons mentionné, un fichier image séparé. Par conséquent, chaque image que le serveur doit obtenir compte comme une requête HTTP distincte. Il est important de limiter le plus possible le nombre de requêtes HTTP sur votre site, car les navigateurs ne peuvent envoyer qu'un nombre limité de requêtes à un serveur simultanément..
La combinaison de vos images dans un seul fichier non seulement réduira considérablement le nombre de demandes HTTP, mais réduira également la taille totale du fichier des images..
Il existe deux approches communes lors de la création de vos feuilles de sprite: les créer avant ou après la construction de votre site..
Vous pouvez placer toutes vos images dans une feuille de sprite à partir du sol lorsque vous créez votre site. Vous mettrez à jour votre CSS au fur et à mesure. C’est ce que nous appellerons le avant méthode.
Vous pouvez également créer toutes vos images sous forme de fichiers distincts, ce qui facilite grandement leur modification. Une fois que votre site est construit et que toutes les images sont préparées, vous pouvez compiler rapidement et facilement, soit manuellement, soit utiliser l'un des nombreux outils permettant d'effectuer tout le travail à votre place (ce dont je parlerai plus en détail par la suite). Ceci, nous nous référerons à comme après approche.
Si vous êtes totalement novice dans les feuilles de sprites ou dans la conception Web, la méthode "après" est définitivement l'option recommandée..
Si vous êtes complètement nouveau dans le domaine des images-objets ou de la conception Web, la méthode après est définitivement l'option recommandée. Vous pouvez conserver tous les fichiers PSD ou fichiers pour chaque image individuelle séparément, apporter des modifications, puis exécuter l'application de votre choix. De plus, si vous ne savez pas comment écrire tout le CSS pour vos images, la plupart des applications générant des sprites produiront également le CSS qui l'accompagne..
La plupart de ces applications sont totalement gratuites, un autre bonus!
Voyons quelques astuces et outils pour vous aider avec les feuilles de sprite. C’est ensuite à vous de choisir l’approche qui vous convient le mieux..
Remarque: la plupart des astuces suivantes supposent que vous ferez votre sprites à l'avance.
Lorsque vous présentez vos images dans Photoshop (ou tout ce que vous utilisez pour mettre en forme votre feuille de sprite), il est judicieux d'essayer d'organiser les choses aussi clairement et facilement que possible. Essayez de toujours arrondir aux 10 pixels les plus proches ou utilisez une certaine quantité d’espace pour chaque image si elles ont toutes la même taille. Quand il s'agit d'écrire tout le CSS qui l'accompagne, vous n'avez pas besoin de continuer à mesurer les coordonnées, et vous serez moins susceptible d'oublier les nombres impliqués..
L'utilisation de figures "plus simples" signifie également que, dans Photoshop, il sera beaucoup plus facile d'utiliser des grilles "de capture" ou de tracer des lignes de grille pour que les choses restent organisées et simples à comprendre..
Si vous mettez toutes vos images dans la feuille de sprite, passez du temps à écrire tout le code CSS, puis décidez qu'une des images doit être modifiée, cela pourrait entraîner de graves problèmes. Si la taille de l'image doit être modifiée, vous devrez peut-être modifier et réaligner la mise en page de votre image-objet, ce qui signifie que vous devrez absolument passer des années à modifier l'intégralité de votre code CSS d'accompagnement..
Ceci est une autre raison pour laquelle vous pourriez être plus intéressé par commencer par des images individuelles puis par utiliser une application pour faire tout le travail difficile pour vous. Après cela, si vous avez besoin de faire quelques modifications, il suffit de relancer l’application et tout sera fait. Que pourrais-tu vouloir de plus?
Si vous utilisez Photoshop ou d'autres éditeurs d'images similaires, il est judicieux de conserver les calques de chaque image-objet correctement étiquetés et groupés, afin que tout soit parfaitement clair si vous (ou toute autre personne) devez la comprendre plus tard..
Vos étiquettes doivent être claires et concises, faciles à comprendre pour tout le monde..
Cela devrait être une pratique assez courante pour la plupart des concepteurs, mais ne repoussez pas l'étiquetage - faites-le dès que vous créez le sprite. Imaginez juste combien de temps vous pourriez économiser avec l’étiquetage si vous disposiez d’une énorme feuille de sprite et ne parveniez pas à trouver les couches appropriées; cela pourrait devenir extrêmement frustrant..
De même, l'étiquetage est vital pour le code CSS de votre sprite. Des étiquettes sont absolument nécessaires pour confirmer quel sprite est sélectionné par le code - et tous les principes ci-dessus s'appliquent toujours. Si vous concevez un modèle pour la vente sur des sites tels que Themeforest, alors tout CSS (et encore moins Sprite Sheet CSS) doit être clairement étiqueté, étant donné que les utilisateurs potentiels peuvent ne pas comprendre le CSS aussi bien que vous..
Il existe une vaste gamme d’outils pour rendre votre génération de feuilles de sprite aussi simple que possible. Lorsque vous créez et concevez avec une gamme d'images individuelles, compilez-les toutes dans une feuille de sprite à la fin - la méthode 'après'.
Voici quelques-uns des meilleurs générateurs de Sprite Sheet:
SpriteMe est un bookmarklet gratuit disponible sur www.spriteme.org. Il est étonnamment simple à utiliser et a peu d'incidence sur la méthode de conception à laquelle vous êtes habitué. Il ouvrira une superposition sur le côté de l'écran où vous pourrez télécharger des images ou des sprites à partir du site Web sur lequel vous l'utilisez, ou plus important encore, générer des sprites et des CSS d'accompagnement pour vous..
Les images d'arrière-plan donnent un aspect satisfaisant aux pages, mais les ralentissent également. Chaque image de fond est une requête HTTP supplémentaire. Il y a un problème: combinez des images d'arrière-plan dans un sprite CSS. Mais créer des sprites est difficile, il nécessite des connaissances obscures et beaucoup d'essais et d'erreurs. SpriteMe supprime les tracas avec le clic d'un bouton. - www.spriteme.org
Comme je l'ai déjà dit, si vous êtes habitué à travailler avec des méthodes d'image individuelles, si vous préférez cette méthode ou si vous ne pouvez pas vous soucier du travail acharné associé aux feuilles de sprites, alors SpriteMe est la solution..
Bien que le site Webdesigntuts + ait déjà des feuilles de sprite, SpriteMe pourrait encore améliorer les choses en les combinant! Vous pouvez voir comment le CSS est exporté - avec l'alignement déjà fait. Tout ce que vous avez à faire est de copier, coller et modifier les URL!
C'est aussi simple que de créer votre conception avec des images individuelles, puis d'exécuter SpriteMe. Il récupère toutes les images d'arrière-plan de vos sites, les regroupe en images-objets et génère la feuille d'images-objets à télécharger. Ensuite, il "injecte l'image-objet dans la page en cours" et "recalcule la position d'arrière-plan CSS" pour vous. Si vous souhaitez un meilleur guide d’utilisation de SpriteMe, consultez le site www.spriteme.org..
Consultez le tableau des économies de SpriteMe pour voir clairement comment Sprite Sheets a permis à de nombreux sites Web d'économiser beaucoup d'espace et de temps de chargement des pages (dans la plupart des cas…).
J'espère vous avoir convaincu que Sprite Sheets est la voie à suivre: économiser de l'espace, réduire le nombre de requêtes HTTP et créer un site Web plus rapide et mieux organisé..
En ce qui concerne les méthodes pour les générer, je recommanderais certainement la méthode "après" et je m'appuierai sur l'un des outils dont nous avons discuté pour faire tout le travail difficile.
Accentsconagua