Catégories
Technologie

CSS technique de cliping

Un problème fréquent lorsque l’on a des sites très graphique, c’est que les nombreuses images mettent longtemps à ce charger.  Non pas qu’elle soit forcément volumineuse, mais surtout du fait qu’il y en ai beaucoup.

Voici une technique qui permet de limiter le nombre d’image en utilisant CSS pour les images de fond. Attention, pour des raisons d’accessibilité, ces images ne doivent pas apporter d’informations.

Le principe est d’assembler plusieurs images ensemble pour qu’elles ne forment plus qu’une seule, puis, au moment de les appliquer en fond d’un élément de les positionner de tel sorte que l’on ne voit que la partie qui nous interesse.

Exemple :

l’image : nous assemblons trois drapeau dans la même image, l’un en dessous de l’autre.

flag for cliping
flag for cliping

le code : nous voulons agrémenter une liste horizontale de pays

<ul id="pays">
<li id="fr">France</li>
<li id="it">Italie</li>
<li id="es">Espagne</li>
</ul>
<style>
#pays li{display:inline;}
#fr {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 -30px no-repeat;padding-left:20px;}
#it {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 -60px no-repeat;padding-left:20px;}
#es {background:transparent url(http://nat.fam-martel.eu/wp-content/flag.gif) 0 0 no-repeat;padding-left:20px;}</style>

Le résultat :

  • France
  • Italie
  • Espagne

La technique n’a rien de nouveau et elle permet de réduire le nombre de requête HTTP, ce qui accélère le chargement d’une page, l’image est un peu plus longue à chargé du fait qu’elle est plus grande et qu’elle à plus de couleur, mais l’un dans l’autre, le gain est significatif.

Un autre avantage est au niveau serveur : Celui-ci ne distribue qu’une image puisqu’il ne reçoit qu’une requête ! Ainsi il est moins demandé et réagit mieux à la charge.

Bateau dans le port de Nice
Bateau dans le port de Nice

Par Nathanaël Martel

Développeur Web, défenseur de la culture libre et du revenu de base