Leçon 8Optimisation des images et chargement différé
- Notion 47 - La différence entre les images matricielles et vectorielles.
- Notion 48 - Sélectionnez le bon type de fichier
- Notion 49 - Ajuster la qualité d'une image.
- Notion 50 - Comprendre la compression d'image
- Notion 51 - Utiliser les sprites CSS
- Notion 52 - Qu'est-ce que le nouveau format WebP?
- Notion 53 - Outils pour l'optimisation d'image.
- Notion 54 - Révision/ évaluation
Notion 51
Utiliser les sprites CSS
Compétences ciblées
Dans ce module, nous allons parler des scripts CSS et de leur impact sur la vitesse et la durabilité de votre site Web.
D'après les informations récoltées sur Internet (Conception Web durable : Sprites CSS - Mightybytes), le Sprite CSS est défini comme une collection d'images qui sont placées au sein d'une seule grande image. En d'autres termes, cette technique consiste à assembler plusieurs images dans un seul fichier, réduisant ainsi le nombre de requêtes HTTP (Hypertext Transfer Protocol). Pour information, cette requête représente un ensemble de lignes transmises au serveur par le navigateur.
Par exemple, au lieu d'utiliser 3 images individuelles sur votre page web, vous pouvez les combiner en une seule. Grâce au CSS, nous pouvons afficher uniquement la partie de l'image dont nous avons besoin.
L'utilisation de cette technique contribue grandement à réduire notre impact écologique lors de la conception de notre site web. En effet, en réduisant le nombre de requêtes envoyées au serveur, elle permet également d'optimiser les performances de votre site Web.
CSS Sprite Generator est un outil en ligne qui peut vous aider à créer vos sprites.
https://www.css.spritegen.com