Les Images

Comment afficher une image en XHTML ?

Quelle est la balise XHTML pour insérer une image ?

Pour donner un aspect plus agréable à son site, il n'y a rien de plus attrayant que l'image. Il est très facile d'insérer une image en XHTML. La balise utilisée pour cela est la balise <img />.La particularité de cette balise c'est qu'elle ne nécessite pas une balise fermante. Voici comment faire pour insérer une image dont le nom est image.jpg :

<img src="images/image.jpg" alt="Mon image" />

La balise img peut avoir plusieurs attributs mais 2 d'entre eux sont obligatoires :

• src : Cet attribut indique l'emplacement de l'image que l'on veut insérer. On peut indiquer un chemin relatif ou absolu selon le lieu où se trouve l'image. Dans la plupart des cas, les images dans un site se trouvent dans un répertoire image dans la racine du site. Dans ce cas, on met comme valeur src="images/fleur.png".
• alt : Pour une cause ou pour une autre, il arrive que l'image ne puisse pas s'afficher. Dans la balise alt on met le texte à afficher si on est confronté à cette situation. Alt veut dire "alternatif". L'indication de ce texte alternatif est obligatoire. Il convient toujours de donner une description de ce que contient l'image. Même si vous jugez ça inutile dans votre cas, il faut toujours mettre l'alt de l'image. Sinon, votre page XHTML ne sera pas valide.

Petite notion en traitement d'image

Certaines pages web tardent beaucoup à se charger à cause de la lourdeur des images. Le fait d'avoir des notions sur les formats d'image pourra vous aider à surmonter ce genre de problème. Savoir choisir le format qui convient à votre image pourra être très bénéfique. Et une image de bonne qualité sera un atout pour le design de votre site.

Résolution :

Une image possède toujours une résolution. La résolution est le nombre de points de sa surface. Sa valeur est exprimée souvent comme suit : largeur x hauteur (ex 1024 x 768). Généralement, on emploie le pixel pour mesurer la résolution de l'image.

Moins il y a de points, moins l'image est petite en poids. A l'inverse, une image à haute résolution est plus visible en bonne qualité. Par contre, il est possible de réduire le nombre de pixel tout en préservant sa bonne qualité mais il existe des formats de compression des images qui altèrent la qualité.

Formats de l'image :

La qualité et le poids de l'image peuvent varier selon le format sous lequel on enregistre l'image. On reconnaît généralement le format d'une image par son extension. Parmi les formats d'images standard que l'on utilise sur les web, on distingue notamment :

• JPEG : Si vous voulez insérer des photos dans vos pages, le Jpeg, ou jpg est le format le plus adapté pour cela. C'est un format très répandu. Les logiciels d'édition de photo nous proposent des niveaux de qualité allant de 0 à 100. Un niveau de qualité faible est traduit par un meilleur poids. La réduction de qualité rendra l'image plus rapide à télécharger. En d'autres termes, il faut chercher à alléger le plus possible l'image tout en respectant un certain niveau de qualité.
• GIF : C'est un format assez vieux qui a été très utilisé. Il se base sur un principe d'indexation. Il permet de stocker 256 couleurs au max. Ce nombre de couleurs maximal est trop faible. C'est pourquoi ce format n'est pas adapté pour les photos. A l'inverse, il est souvent utilisé pour des icônes par exemple. Son avantage est qu'il permet d'avoir des images animées. En traitant l'image dans les logiciels d'édition photos, on peut spécifier un nombre de couleurs à stocker.
• PNG : Png est un format très récent. L'avantage du PNG est qu'il gère facilement la transparence. Aujourd'hui, il est même meilleur que le gif, et en général les images png sont plus légères. Contrairement au format gif qui est limité à 256 couleurs, le png peut aller jusqu'à plusieurs millions de couleurs.

Rendre une image cliquable

A la place du texte, l'image peut très bien servir de lien. Il suffit de mettre une image entre les balises <a></a>. L'insertion de l'image entre ces balises implique l'utilisation de la balise img.

Exemple:

<a href="le_lien.html"><img src="images/fond.jpg" alt="mon fond" /></a>

Mettre une bulle sur l'image

Pour afficher une bulle d'aide sur une image, on utilise le même attribut que pour les liens. L'attribut title est facultatif. En revanche si on omet cet attribut, Internet Explorer va afficher le contenu de l'attribut alt dans la bulle. Mais nous savons bien que le texte alternatif n'est pas fait pour cela. Alors, il est tout de même plus convenable de mettre le title.

Exemple :

<img src="images/fond.jpg" alt="Mon Fond" title="cliquer pour voir le fond" />