L’avantage des sprites CSS

Cela fait quelques années que les sprites CSS existent et vous les connaissaient sûrement. Le concept est de rassembler plusieurs images sur une seule pour optimiser son site, sa fludité et ses performance. Si je vous en parle aujourd’hui, c’est parce que j’ai enfin décidé dans mettre sur Empire Immo. Voici pourquoi :

1 – Un meilleur effet « hover » au passage de la souris pour plus de fluidité  :

Et oui, plus la peine d’attendre que l’image se télécharge pour avoir un effet « hover ». Si vous mettez l’image initiale et l’image « hover » dans le même sprite, alors l’effet est instantané. Ceci est important notamment pour les personnes qui n’auraient pas un réseau très performant sur PC et surtout sur mobile. L’interface et l’ergonomie sont plus fluides. Cela apporte de la qualité pour vos utilisateurs.

2 – Diminuer le nombre de requêtes nécessaire au chargement des médias :

Si comme moi, vous avez un site qui consomme une quantité importante d’images alors les sprites vont vous permettre d’améliorer les performances de vos pages. Car, il faut savoir que les navigateurs ne téléchargent que X médias à la fois (5 par domaines à la fois). Donc ils vont prendre plus de temps à télécharger vos 50 médias, plutôt que vos 5 sprites.

Sur Empire Immo, j’ai donc fait des sprites avec les images des menus, avec les smileys, avec les boutons du header. J’ai ainsi réduis considérablement le nombre de requêtes nécessaire au chargement des images. Le site se charge plus vite et les effets sont beaucoup plus fluides.

Vous retrouverez plus de détails sur l’utilisation des sprites CSS sur cet articles très bien fait : http://netmacom.fr/blog/webdesign/reduire-ses-requetes-http-avec-les-sprites.html

Et toi, tu es passé aux sprites CSS ou pas encore ?

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *