Bienfaits de cette optimisation

Assembler les images plutôt que les découper permet de réduire considérablement votre consommation en requêtes HTTP. Il ne faut pas oublier que chaque appel à un objet représente une requête, si vous faites appel à plusieurs images pour ne faire qu'un seul élément vous gaspillez des requêtes inutilement. Sachez que dans bien des cas cette technique permet également une baisse du poids des images et donc une baisse de la consommation de la bande passante.
N'hésitez pas à faire des essais en suivant la procédure.

Procédure à suivre (pour les images sans liens)

Assembler ses images n'est pas compliqué, n'importe quel logiciel de création graphique ou de retouche photo, comme par exemple Le Gimp, vous permet de le faire. Ce qui est plus compliqué c'est de savoir quand rassembler ses images et comment le faire du point de vue du code HTML.

Pour mieux comprendre nous allons prendre un exemple :

On pourrait se dire que cet élément est composé de quatre images séparées, consommant donc chacune une requête HTTP. Pourtant il n'en est rien. Ce bocl est composé d'une seul imae, ne consomme qu'une requête et ne pèse que 700 octets.
Si nous avions utilisé quatre images nous aurions consommé quatre requêtes et un peu plus de 900 octets.

La procédure à suivre est donc d'assembler sur un logiciel de création graphique les images de votre site qui sont destinées à être affichées en bloc. Il faut donc proscrire les logiciels de découpage d'image pour le Web. Ceux-ci vous permettent de découper un design fait de manière graphique pour en créer une page HTML lourde et très consommatrice en requêtes.

Sachez que si une image est répetée de nombreuses fois sur une page elle ne sera pas rechargée et ne consommera donc pas de nouveau une requête HTTP. Par exemple cette petite boîte est présente de nombreuses fois sur tout le site. Elle ne sera donc chargée qu'une seule fois puis mise en cache.

Procédure à suivre (pour les images avec liens)

A la découverte de la balise <,map>

La plupart du temps les Webmasters n'assemblent pas leurs images par ce que chacune d'elle contient un lien différent. Ils pensent qu'en les regroupant il ne sera plus possible de créer des liens différents sur l'unique image qui leur resterai. Mais heureusement la balise <,map> est là :o)

Nous allons voir ici comment créer plusieurs liens différents sur une seule image. Et pour faire simple nous allons reprendre les icônes de bas de page. Passez le curseur de la souris sur les différentes parties de l'image, chaque case propose un lien.

Utilisation de la balise <map>

Pour ce qui est de l'utilisation de la balise <,map>, ses options et ses différents paramètres, je vous laisse le soin de lire l'excellent article qui lui est consacré sur le guide SelfHTML, véritable référence en matière de développement Web, dans la rubrique 'Index de la syntaxe / AREA'. Il me serait impossible de vous rédiger une explication aussi claire et complète que la leur :o)

Imprimer cette page | Ajouter aux favoris
Revenir en haut de la page

Besoin d'aide ? Une question ?

N'hésitez pas à venir chercher de l'aide ou des explications spécifiques sur le forum En1heure.
Nous ferons notre possible pour vous aider au plus vite.