Les Sprites CSS : Utilisation et technique

Tweet

Mes chers jeunes gens, vous vous demandez pourquoi le terme Sprite vous est si familier (J’évite volontairement les blagues trop attendues sur la boisson citronnée) ?

C’est certainement parce que vous avez passé des nuits entières devant vos bonnes vieilles Megadrive et/ou SuperNes, et attendiez fébrilement la sortie du prochain Street Fighter, Sonic, Mario, King of Fighters, ou que sais-je (il y a toujours un prochain…), en glanant tout ce que vous pouviez dans la presse spécialisée, pour prendre votre mal en patience.

Vous êtes alors certainement déjà tombés sur ce terme, et l’avez même utilisé sans trop savoir ce que ça pouvait bien vouloir dire : « Comment y ‘font trop beaux, les ‘fprites, dans le nouveau ‘ftreet ‘fighter ! », avec votre chouette appareil dentaire.

Et bien oui, le terme vient de nos bons vieux jeux-vidéos 2D, et définit donc les éléments animés évoluant à l’écran. Par exemple, dans un jeu de plate-forme « old-school » (prenons Sonic), votre petit héro favori, ses ennemis, et les projectiles qu’ils peuvent vous balancer (m’en fous j’ai les vies infinies…) sont des « sprites ». Voyez plutôt (nostaaaaalgiiiiiiie) :

Ci-dessus, notre petit Sonic adoré n’est en fait qu’un « bloc » d’une taille donnée qui se déplace à l’écran (ce qui n’enlève rien à son côté attachant), dans lequel se déplace une image de fond contenant toutes ses représentations. En déplaçant cette image de fond aux bonnes positions, à la fréquence qui convient, vous obtenez l’illusion du mouvement d’un petit hérisson bleu en baskets rouges, ce qui est grandement crédible, en soit.

Assez parler de jeux-vidéos, je pense que vous avez compris le principe. Si vous avez entendu parler de « Sprites CSS », le parallèle est très simple à faire : il s’agit simplement d’un élément HTML aux dimensions définies auquel on applique une image de fond à une position donnée. Cette image de fond pouvant contenir une multitude d’éléments, comme des boutons et leur différents états (normal, survolé, cliqué…), des curseurs, des logos, pictos, etc.

Quel intérêt, pour le web ? Plusieurs choses : pour commencer, le poids de fichier et l’économie de requêtes vers le site consulté : il est plus intéressant de ne charger qu’une image une seule fois, plutôt que de multiplier le nombre de fichiers image sur le serveur, et de fait multiplier inutilement les requêtes HTTP.

Voilà deux exemples assez évidents, repris maintes et maintes fois tant ils rendent le propos concret :

Le site Google
Voilà un exemple de sprite très complet. Il contient en effet la quasi totalité du site!
Google a toujours pris un soin particulier à l’optimisation de leur moteur de recherche. Minimalisme, légèreté, efficacité. L’image (PNG) ne pèse que 33 Ko. Voilà un petit exemple explicatif du système :

Niveau CSS, les styles communs à tous les sprites Google :

.csb,
.ss,
#logo span,
.play_icon,
.mini_play_icon,
.micon,
.licon,
.close_btn,
#tbp,
.lsb,
.mbi {
    background: url("/images/nav_logo29.png") no-repeat 0 0;
    overflow: hidden;
}

Les styles pour le bouton vidéo pris en exemple :

.micon {
    background-position:-80px -85px;
    float: left;
    height: 19px;
    margin-right: 5px;
    margin-top: 2px;
    outline: medium none;
    padding-right: 1px;
    width: 19px;
}

La navigation d’Apple :
Et voilà un exemple des plus pertinents : un sprite pour l’ensemble des boutons et états du menu principal, qui est bien évidemment appelé sur toutes les pages du site. L’image (PNG) fait moins de 25 Ko. Il va sans dire que ce système requiert une certaine précision, mais c’est un gain de poids considérable.

Tags : Background - CSS - Ergonomie - Pratique - Sprites - technique - Webdesign

Tweet

A propos de l'auteur