[Webdesign] Des images combinées pour améliorer les performances de votre site


Réduire le nombre de requêtes et la bande passante est, et continuera d’être, un challenge pour les webdesigners qui crées des sites toujours plus complexes.

L’une des techniques qui peuvent permettre de réduire le nombre de requêtes et la bande passante utilisée, est la réduction du nombre d’images.

Une technique courante en webdesign en utilise beaucoup: la construction de cadres aux bords arrondis. On peut aussi ajouter les gradients, lignes et fonds …

En effet, la technique de base consiste à utiliser au minimum 4 images (8 parfois) pour représenter les coins arrondis. Une pour chaque coin:

Ensuite, un peu de CSS fait l’amalgame et compose le cadre.

.Top
{
   background-image: url(TopLine.png);
   height:10px;
   width:100%;
   background-repeat:repeat-x;
   background-position:top center;
}

.TopLeft
{
   float:left;
   background-image: url(ULCorner.png);
   width:10px;
   height:10px;
   background-position:top left;
}

La première classe CSS, Top, est utilisé pour dessiner la ligne supérieure du cadre. Il utilise un attribut height pour aligner la ligne sur le coin et un attribut repeat-x pour la prolonger sur toute la longueur.

La classe TopLeft va placer le coin haut gauche. Pour ce faire, elle utilise deux attributs, height et width pour définir la taille du coin.

On en fait de même avec les 3 autres coins et bords.

Pour faire le rendu de ce cadre, il faut donc 8 images et donc 8 requêtes HTTP. Le poids des images et là souvent négligeable.

Bien qu’il y ait d’autres éléments dans les classes CSS, les plus déterminants sont ceux qui fixent:

  • la hauteur et la largeur des coins: height et width
  • la largeur de la ligne horizontale: repeat-x
  • la largeur de la ligne verticale: repeat-y

Les images sont donc séparées en 3 catégories que l’on peut regrouper ainsi:

En utilisant des techniques CSS classiques, il est tout à fait possible d’arriver au même résultat en ne se servant que de ces 3 images. On commence par modifier le « background »:

background: url(image_file.png) -x -y;

Les paramètres -x et -y sont ajoutés pour identifier les coordonnées du coin haut-gauche. On en fera de même pour les trois autres.

  • Upper Left: -0 -0
  • Upper Right: -10 -0
  • Lower Left: -0 -10
  • Lower Right: -10 -10

Ceci nécessite de connaitre les décalages nécessaires. Mais si l’on est le créateur de ses images, il suffit d’en connaitre les tailles et les marges.

Les classes CSS deviennent dont:

.Top
{
   background: url(hlines.png) -0px -0px repeat-x;
   height:10px;
   width:100%;
}

.TopLeft
{
   float:left;
   background: url(Corners.png) -0px -0px;
   width:10px;
   height:10px;
}

En conclusion, nous sommes passés de 8 images à 3 images, et donc de 8 requêtes HTTP à 3.

images # fichiers taille
séparées 8 7,24 Ko
combinées 3 2,97 Ko
gains 5 4,27 Ko

La même technique peut être employée pour tous les autres éléments graphiques d’un design, y compris les cadres complets avec gradients. La règle est de combiner autant que possible les images, tant qu’au final cela reste plus léger.

Pas de quoi révolutionner le Web mais en cas de grosse charge avec beaucoup de nouveaux visiteurs (l’effet Digg), cela peut grandement soulager vos serveurs et améliorer l’expérience de vos visiteurs.

PS: je suis au courant qu’il existe des nouvelles choses en CSS3 et des choses spécifiques à certains navigateurs.

Crédits: Chris Bennett / Dev.com