Cours HTML N°5 : les images

GIF ou JPEG ?

Avant de passer aux balises, il faut savoir ce qui suit.

• Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.

• L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16 couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.

• Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.

• Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Avec Netscape, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Save Image As...).

La balise <IMG SRC>

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse... 1. Attributs.

(Texte alternatif) alt="****"	Pour les browser n'ayant pas l'option "image" activée
(Dimensions) width=x height=y	Hauteur et largeur (en pixels)
border=x (en pixels)	Bordure
align=top align=middle align=botton align=left align=right	Alignement

Commentaires :

• En HTML, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages HTML.
• Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier HTML ne modifie en rien sa taille.
• Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.
• Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi, connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte..
• Nous pouvons très bien faire un lien sur une image (<A HREF="fichier.htm"><IMG SRC="image.gif"></A>)

2. L'attribut Align

L'attribut align positionne l'image par rapport au texte