Comment réduire le temps de chargement des images : utilisez les CSS Stripes

Publié le 9 octobre 2009 - Developpement Web, Webdesign. Tags : , ,

Toujours dans une optique d’optimisation du code CSS, les CSS Sprites sont une méthode très efficace pour réduire le nombre de requêtes effectuées par le serveur, permettant une réduction du temps de chargement des pages, donc un affichage plus rapide. (cf. comment Yahoo! et Aol on amélioré leurs performances – anglais)

Cette technique originaire de l’univers des jeux vidéos consiste à grosso-modo à limiter le nombre d’images à charger à partir de notre feuille de style, partant du principe qu’une image commune pour différentes icones est largement plus optimal que plusieurs fichiers séparés de petites icônes. L’exemple donné sur CSS Tricks est sans appel, le nombre de requêtes pour 5 icônes avec rollover passant de 10 à 1 avec un temps de chargement divisé par 2! Imaginez les résultats sur les designs plus complexes…

Concrètement, voici à quoi ressemble la Sprite de google :

css sprite

css sprite

Au niveau de l’intégration, le principal soucis de cette méthode consiste à définir des zones d’affichage spécifique pour chaque graphique. Ces zones sont définies à la fois par des marges négatives (par rapport au coin haut gauche de l’image) au niveau de la propriété background de l’élément, et un espace définie par les propriétés width et height.

Ainsi pour afficher la flèche bleue suivante et le texte gle associé (qui apparait tout à droite de la pagination sur la liste des résultats de Google), il faut appeler une class CSS de ce type :

background-position:-76px 0
width:66px;
height:26px;

…Class fille héritant bien évidemment de l’appel de l’image principale à un niveau supérieur, via un background:url(/images/monimag.png) no-repeat;
Voici pour s’entrainer une ressources assez explicite (Anglais) sur la façon de mettre en place votre Sprite CSS : Créer facilement des CSS Sprites.

Pour gagner du temps, il est aussi possible d’utiliser l’outil gratuit CSS Stripe Generator.


Articles sur ce thème :