Le concept de sprites existe depuis un certain temps maintenant. C'est l'une des techniques les plus couramment utilisées dans l'industrie du jeu pour accélérer le processus d'affichage des animations sur un écran. Dans cet article, nous verrons en particulier comment cette technique peut nous aider à améliorer l'expérience utilisateur sur les pages Web à l'aide de CSS Sprites dans l'ordre suivant:
tutoriel de serveur SQL pour les débutants
- Qu'est-ce qu'un Sprite?
- Qu'est-ce que CSS Sprite - un aperçu rapide?
- Exemple d'aide au développement Web?
- Avantages de l'utilisation de sprites CSS
- Que doit faire un développeur lorsqu'il travaille avec des sprites CSS?
- Comment créer une feuille de sprite CSS?
- Comment travailler avec des sprites CSS?
- Entreprises utilisant des sprites CSS
Qu'est-ce qu'un Sprite?
Un sprite est une image unique qui fait partie d'une plus grande scène dans un jeu. Plusieurs sprites sont ensuite combinés en une grande image appelée feuille de sprites. Une fois qu'une feuille de sprite est chargée dans la mémoire, différents sprites sont rendus en succession rapide pour donner l'illusion de l'animation. Cela se fait simultanément pour des dizaines à des centaines de sprites différents pour générer une scène dans le jeu.
L'idée de base est qu'il est beaucoup plus rapide de charger une image et d'en afficher une partie là où c'est nécessaire, par rapport au chargement de plusieurs images et à les afficher.
Qu'est-ce que CSS Sprite: un aperçu rapide?
Un sprite CSS est une technique souvent utilisée par les développeurs Web pour optimiser les performances des pages Web. Dans cette technique, plusieurs images plus petites, généralement de mêmes dimensions, sont combinées en une seule grande image appelée feuille de sprite ou jeu de tuiles . Cette feuille de sprite est ensuite utilisée pour afficher des éléments individuels partout où nous en avons besoin.
Habituellement, des éléments tels que des logos, des flèches de navigation, des boutons sont inclus dans la feuille de sprite car ils ont presque les mêmes dimensions et sont fréquemment utilisés dans une page Web.
Exemple d'aide au développement Web?
En général, lors de la conception des pages Web, les images sont stockées et utilisées sous forme de fichiers individuels. Ainsi, lorsqu'un utilisateur ouvre une page Web, le navigateur doit faire une requête HTTP pour chacun de ces fichiers, les télécharger séparément et les afficher. Cela conduit à des temps de chargement de page plus élevés, car une page Web particulière peut avoir un grand nombre d'images plus petites comme des boutons, des icônes, des logos.
Les sprites CSS aident les développeurs à combiner ces petites images fréquemment utilisées en une seule grande image. Le navigateur doit alors télécharger un seul fichier qui est ensuite utilisé pourafficher la section souhaitée en décalant l'image.
Avantages de l'utilisation de sprites CSS
Il y a deux avantages principaux à utiliser des sprites CSS par rapport aux images normales:
Chargement de page plus rapide: Améliore le temps de chargement de la page car les images utilisées dans la page Web apparaissent dès que la feuille est téléchargée.
Plus grand débit et moindre utilisation des ressources: Non seulement cette technique améliore l'expérience de l'utilisateur final en accélérant le chargement de la page,mais cela réduit également la congestion du réseau car le nombre de requêtes HTTP est réduit.
Que doit faire un développeur lorsqu'il travaille avec des sprites CSS?
Lorsque vous travaillez avec des images individuelles, le développeur peut simplement travailler avec une balise HTML et stylisez-le en CSS si nécessaire. Mais lorsqu'il travaille avec des sprites CSS, un développeur doit faire deux choses spécifiques:
- Création de Sprite Sheet
Lors du développement d'une page Web, si le développeur décide d'utiliser des sprites CSS, il / elle doit d'abord créer la feuille de sprite en fusionnant tous les éléments souhaités tels que les boutons, les logos, etc. dans un motif en forme de grille. Cela peut être fait en utilisant n'importe quel programme d'édition d'image comme Photoshop ou Gimp. Il existe également de nombreux outils en ligne disponibles pour vous aider à créer la feuille de sprite. Ces outils sont décrits plus loin dans cet article.
- Accédez à un élément particulier du sprite en utilisant le Position d'arrière-plan CSS propriété
Une fois la feuille de sprite prête, le développeur doit alors utiliser les attributs CSS pour accéder aux différentes parties de la feuille.
- largeur: Largeur du sprite
- la taille: Hauteur du sprite
- Contexte: Référence à la feuille de sprite
- Position d'arrière-plan: Décalage des valeurs (en pixels) pour accéder uniquement à la partie requise de la feuille de sprite
Comment créer une feuille de sprite CSS?
Vous pouvez utiliser n'importe quel logiciel d'édition d'images pour organiser vos images plus petites dans une grille, mais deux méthodes plus simples sont décrites ci-dessous:
1. Outil de création de feuille de sprite en ligne
LIEN: toptal.com/developers/css/sprite-generator/
Cet outil est non seulement gratuit à utiliser, mais vous fournit également le code CSS requis qui peut être utilisé lors du référencement de la feuille de sprite. En outre, vous pouvez manipuler différentes propriétés comme le remplissage entre les éléments et la modification de leur alignement.
2. Générer une feuille de sprite avec Sprity
Si vous utilisez Grunt, Node ou Gulp, vous pouvez installer un package appelé Sprity qui vous aidera à créer une feuille de sprite dans une variété de formats comme PNG, JPG, etc.
Tout d'abord, vous devrez installer Sprity en utilisant:
npm installer sprity -g
Ensuite, pour générer une feuille de sprite, utilisez la commande suivante:
sprity ./output-directory/ ./input-directory/*.png
Comment travailler avec des sprites CSS?
Dans cet exemple, nous utiliserons la feuille de sprite suivante:
Comme vous pouvez le voir dans l'image ci-dessus, six icônes (Instagram, Twitter et Facebook) ont été disposées en forme de grille. Dans la première ligne, nous avons un état normal et dans la deuxième ligne, nous avons leur état de survol (l'image qui apparaît une fois que nous avons survolé le curseur de la souris).
Si vous avez créé la feuille de sprite en utilisant les outils dont nous avons discuté ci-dessus, vous connaissez déjà les décalages requis dans le CSS, mais si vous avez utilisé un autre outil ou si vous avez simplement reçu une feuille de sprite, ne vous inquiétez pas, nous discuterons d'une méthode qui vous aidera à obtenir des décalages pour l'élément requis.
Voyons maintenant un moyen très simple d'obtenir les décalages requis pour chacune des six icônes en utilisant MS Paint. Ce n'est peut-être pas une solution idéale pour travailler avec des sprites, mais comme il possède la fonctionnalité qui fournit les coordonnées du curseur de la souris, il peut être utilisé pour obtenir les coordonnées X et Y requises.
Tout d'abord, ouvrez votre image de feuille de sprite (grille contenant toutes les images plus petites) et amenez le curseur de votre souris sur le coin supérieur gauche du sprite que vous souhaitez saisir.
Une fois que vous avez les coordonnées du point en haut à gauche de votre sprite (image Instagram en haut à gauche), vous pouvez afficher ce sprite spécifique partout où cela est nécessaire en utilisant le code CSS:
arrière-plan: url ('img_sprites.png')
background-position: 0 0
largeur: 125px
hauteur: 125px
Nous utilisons une largeur et une hauteur de 125 pixels car nos icônes sont de cette dimension. Pour récupérer l'image suivante (Twitter) dans la même ligne, nous utilisons le code suivant:
arrière-plan: url ('img_sprites.png')
position de l'arrière-plan: -128px 0px
largeur: 125px
hauteur: 125px
Notez l'attribut background-position dans l'extrait de code ci-dessus. (-128px, 0) signifie que nous décalons notre feuille de sprite vers la gauche de 128 pixels (en tenant compte du remplissage entre les éléments) et de 0 pixels sur l'axe Y. Si nous devions accéder à l'icône de survol de Twitter, notre attribut background-position serait:
position de l'arrière-plan: -128px -128px
De cette façon, nous pouvons maintenant accéder à chaque composant de notre feuille de sprite en utilisant CSS. Passons en revue un code HTML et CSS complet pour savoir comment procéder.
Étape 1: Rédaction du code HTML requis
Dans le code ci-dessous, nous ajoutons simplement trois liens. De plus, nous lierons notre HTML à la feuille de style (screen.css).
Étape 2: Rédaction du CSS nécessaire. Tout d'abord, nous allons styliser notre classe d'icônes partagée. Ici, vous pouvez voir que nous faisons référence à la feuille de sprite que nous avons créée.
/ * Classe d'icônes partagées * /
span.icon un lien,
span.icon a: visité{
afficher:bloquer
retrait du texte:-9999px
image de fond: url (./ img_sprites.png)
Répétition du fond:pas de répétition
}
Étape 3: Récupération des icônes individuelles de la feuille de sprite à l'aide des décalages.
/ * Icône Instagram * /
span.instagram un lien,
span.instagram a: visité{
largeur:125px
la taille:125px
position de fond:0 0
}
/ * Icône Twitter * /
span.twitter un lien,
span.twitter a: visité{
largeur:125px
la taille:125px
position de fond:-128px 0
}
/ * Icône Facebook * /
span.facebook un lien,
span.facebook a: visité{
largeur:125px
la taille:125px
position de fond:-257px 0
à quoi sert la marionnette
}
Étape 4: Obtenir les icônes de survol de la feuille de sprite à l'aide des décalages.
span.instagram a: survoler{position de fond:0 -128px}
span.twitter a: survoler{position de fond:-128px -128px}
span.facebook a: survoler{position de fond:-255px -128px}
Entreprises utilisant des sprites CSS
De nombreux grands noms de l'industrie utilisent des sprites CSS pour améliorer la réactivité de leurs sites Web. Des entreprises comme Google, Facebook, Amazon utilisent largement cette méthode car cela les aide à réduire le nombre de requêtes HTTP par session pour un utilisateur particulier. C'est un énorme avantage si l'on tient compte du fait que ces entreprises servent des millions de clients à un moment donné.
Maintenant que vous maîtrisez ce que sont les sprites CSS et comment travailler avec eux, vous êtes un pas de plus dans votre parcours pour apprendre le CSS. Des concepts tels que les sprites changent la donne à l’heure actuelle, car il est devenu extrêmement important pour les développeurs d’extraire toutes les performances d’une page Web.
Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Images HTML» et nous vous recontacterons.