Optimiser le chargement de la page avec les sprites

Pour ceux qui ne le savent pas, le sprite dont on parlera ici n’a rien à voir avec la boisson gazeuse de la célèbre marque de soda.
En effet, un sprite CSS se présente comme une technique utilisée qui consiste à l’assemblage de plusieurs images en une seule et même image.
Utilisée par de nombreux front-end développeur, la technique permet de réduire énormément la charge de travail du navigateur en faveur de l’augmentation de la vitesse de chargement du site.

Il faut savoir qu’utiliser une multitude d’images occasionnent une augmentation du nombre de requêtes HTTP du navigateur ce qui influe énormément sur le temps de chargement.

HTTP

Sachez que l’utilité des Sprites CSS ne s’arrête pas là. Effectivement, en plus de gagner de la vitesse en exécution, la technique se présente comme un atout majeur pour une meilleure esthétique de l’affichage.

Lorsqu’on applique un :hover sur un lien, il existe un délai d’attente de quelques millisecondes, bien évidemment selon le navigateur et la vitesse de connexion.
Ce délai est nécessaire au chargement de l’image survolée. Il faut dire que le petit scintillement apparenté au délai d’attente est assez gênant pour les yeux.

La création d’un Sprite

Pour les plus expérimentés en PAO, ces derniers sauront créer leur propre sprite avec des logiciels de retouche d’image comme Gimp, Photoshop…
Si vous ne faites pas partie de ces personnes, il n’y a pas de quoi paniquer puisqu’il existe sur le web différents outils simples d’utilisation permettant la génération de vos propres Sprites et cela gratuitement :

  • SpriteGenerator permettant la combinaison des images fournies depuis une archive ZIP en une seule image. Cet outil offre différentes propriétés personnalisables comme le redimensionnement, les options du CSS généré ou encore la qualité de l’image
  • SpriteCreator permettant de créer un Sprite de la zone visible grâce à la souris. Une fois que cette zone définie est définie à la volée, le CSS est généré. Celui-ci comprendra les données de positionnement ainsi que la taille.
  • Stitches quant à lui est l’outil le plus complet. Il réunit les fonctionnalités de SpriteGenerator et Sprite Creator. Vous n’aurez qu’à faire de simple « Drag and Drop » sur une interface intuitive. Bien évidemment en HTML5.

La configuration d’un Sprite CSS

Pour mettre en pratique, nous allons styliser avec du sprite les liens des reseaux sociaux sur le footer ci-dessous.

footer

Voici le CSS associé à ces icônes :

Les sprites CSS : une utilisation courante

Il faut savoir que le Sprite CSS connaît une utilisation vulgarisée sur la toile comme l’atteste la sélection suivante regroupant les différentes plateformes les plus fréquentées sur internet : Facebook, Google, Twitter et YouTube.

sprite demo

Répondre