Examinons de plus près un outil aussi intéressant que les sprites CSS. De nombreux concepteurs de mise en page et webmasters expérimentés sont bien conscients des avantages de cette technique simple. Le côté positif de l'utilisation des sprites est que le temps de chargement des pages est considérablement réduit en réduisant le nombre d'images individuelles. Dans les normes de mise en page modernes, il est d'usage de regrouper les petites icônes et les images thématiques dans une collection spéciale d'images. En termes simples, un sprite est une image qui comprend un ensemble de petites images d'un thème.

De cette façon, lorsque nous regroupons de petites images, nous réduisons le nombre de requêtes au serveur. Notre page ne charge qu'une seule image au lieu de 30 petites. Cela donne un gain significatif en vitesse de chargement.

In a nutshell: CSS Sprites are a tool for combining multiple images into a single file for use on a website to significantly improve performance. The concept of Sprite may seem a bit misleading considering you're creating a large image rather than working with small ones.

Pour résumer : le terme "sprites" vient d'une technique d'infographie la plus souvent utilisée dans les jeux vidéo. L'idée était de stocker une image en mémoire, puis d'afficher seulement une partie de cette image, ce qui était plus rapide que de récupérer de nouvelles images.

CSS Sprites est à peu près la théorie exacte : obtenez l'image une fois, déplacez l'arrière-plan et n'en affichez que des parties. Cela réduit la surcharge lors de la récupération de plusieurs images.

Il existe un grand nombre de services sur Internet pour créer des sprites. Il vous suffit de taper la requête appropriée dans un moteur de recherche. Si vous êtes trop paresseux pour effectuer une recherche, voici quelques ressources populaires sur ce sujet. générateur de sprites toptal, générateur de sprites inettools. Let's say you've cut up your template, selected all the little icons, created a sprite out of it, what's next?

Comment utiliser les icônes d'un sprite

Voyons maintenant la procédure pour travailler avec un sprite.

• Let's create a general class, for example, call it .sprite, the background of which is this image, which was created using the sprite.png generator. Dans la même classe, nous définirons la hauteur et la largeur, qui seront la hauteur et la largeur des icônes de sprite si elles ont la même taille.
• For blocks where you need to use this icon, set the background offset to the desired amount using the css property background-position. En savoir plus sur les arrière-plans dans l'article précédent.

Exemple :

.sprite {
 largeur : 30 px;
 hauteur : 30 px ;
 arrière-plan : url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 position d'arrière-plan : 0 -80 px;
}

Bon travail