Exemple d'un "sprite" de menuYa plein de façons pour optimiser un site web : dans ce billet, je vais porter mon attention à ce que l’on peut faire avec les images. Habituellement, mis à part réduire leur poids, on essaie simplement d’en réduire le nombre et la dimension pour gérer la taille totale de données à télécharger par le navigateur. Mais ya une « vieille » technique qui refuse de mourir et qui fait exactement ce que l’on souhaite : réduire le temps de chargement de la page. Cette technique est d’utiliser des CSS sprites.

Il ne faut pas confondre les CSS sprites avec l’ancienne technique à la mode qui consistait à découper les images en petites parties pour faire croire que la page se chargeait plus rapidement… car ce n’était qu’une impression. En réalité, cette technique ralentit le processus car elle oblige le navigateur à effectuer un très grand nombre de requêtes au serveur; or, la plupart des navigateurs ont une limite de 4 ou 5 connexions parallèles par hôte. Pas très performant tout compte fait, hein…

Non, je parlais des CSS sprites comme étant une vielle technique dans le sens qu’elle provient de l’ère des premiers jeux vidéos. Le principe est simple : pour contourner les limitations des systèmes à l’époque, les concepteurs plaçaient sur une même grille tous les petits éléments graphiques qui constituaient le jeu. Il ne restait ensuite qu’à afficher l’élément choisi dans la grille qui masquait alors une partie prédéterminée de la plus grande image. C’est exactement le but des CSS sprites : accélérer le chargement en réduisant le nombre de requêtes d’images, tout simplement en utilisant une seule image dont on utilise des parties prédéfinies partout, à volonté.

Bien sûr, comme tous les outils web, il y a des conditions qui se collent mieux que d’autres à l’utilisation de cette technique et bien sûr, seul votre jugement pourra vous aider dans cette situation 😉 Si vous voulez approfondir vos connaissances à ce sujet ou juste expérimenter un brin, je vous recommande cet excellent tutoriel : Building Faster Websites with CSS Sprites.

Commenter