Insérer une Image

Des images, comme des photographies ou des diagrammes, peuvent améliorer le contenu de vos pages. Elles peuvent aussi enrichir le design de votre site Web. Pour se faire, il vous suffit d'utiliser la balise <img/> avec de nombreux attributs qui fournissent diverses informations telles que la source de l'image, sa largeur et hauteur, et un texte alternatif.

L'Utilisation des Attributs de la Balise <img/>

L'attribut src sert à spécifier le chemin d'accès de l'image à insérer. Il peut s'agir d'un chemin relatif, comme présenté dans l'exemple ci-dessus ou bien de l'URL d'une image hébergée sur un autre site Web, bien que cette dernière option ne soit pas préférable, car l'URL peut disparaître du jour au lendemain.

L'attribut alt permet en principe d'afficher un texte alternatif à la place de l'image si elle ne peut pas être affichée : par exemple, pour les utilisateurs de navigateurs textuels ou si le chemin d'accès à l'image est incorrect. Malheureusement, cette dernière utilisation de l'attribut alt ne fonctionne que dans le navigateur Firefox. Internet Explorer, lui, se contente d'afficher une image de croix rouge lorsque le chemin d'accès à l'image est incorrect et n'affiche le texte alternatif que lors du survol de l'image par votre souris. À cause de cette disparité de rendu par les navigateurs graphiques, l'attribut alt est principalement utilisé pour l'accessibilité à votre site Web, en particulier pour les navigateurs textuels. Si l'image insérée est décorative, l'attribut devrait être vide (alt=""), et dans le cas inverse, il devrait contenir un descriptif du contenu ou de la fonction de l'image (par exemple : graphique mensuel du nombre de visiteurs).

Aperçu dans Firefox :

Utilisation du Texte Alternatif

Aperçu dans Internet Explorer :

Quant aux attributs width et height, ils doivent être utilisés pour définir respectivement la largeur et hauteur de votre image, en pixels, pour faciliter leur affichage par les navigateurs Web. Lorsque vous insérez des images dans vos pages Web, gardez à l'esprit que vos visiteurs doivent les télécharger avant de les voir. Pour cette raison, vous devez limiter la taille et le nombre d'images sur chaque page Web pour que vos visiteurs n'aient pas à attendre trop longtemps le contenu de vos pages. N'hésitez pas à consacrer un certain temps pour sélectionner, redimensionner et optimiser vos images à l'aide d'un éditeur graphique comme GIMP, avant de les mettre en ligne afin de réduire le temps de téléchargement de vos pages Web.

Contrairement à ce que certains guides HTML préconisent, les attributs width et height ne doivent pas être utilisés pour redimensionner vos images. La raison est en simple : redimensionner une image à l'aide des attributs width et height ne modifie pas la taille du fichier source que vos visiteurs doivent télécharger. Bref, vous ne réduisez pas le temps de téléchargement de vos pages Web.

Combiner Images et Liens

Le langage HTML permet aussi de combiner images et liens afin d'utiliser une image comme lien vers une autre page ou vers un document, une autre images par exemple. Cela peut être très utile si vous souhaitez créer une galerie d'images, trop larges pour être toutes affichées sur une même page Web. Il vous suffit alors de créer une vignette de chaque image, qui sera un lien vers son original. En voici un exemple que j'utilise dans ma page Voyager aux USA - San Francisco et Sonoma Coast :

<< Créer un Lien

Afficher une Liste >>