Technologies Internet et Education, © TECFA
  9. Images

---

9.1 Insertion d'images

Les formats d'image affichables par les browsers sont *.gif et *.jpg (*.png pour les récents)

Pour avoir des images à l'intérieur d'un document HTML, on utilise la commande "img":

<img src="URL" align="alignement" alt="commentaire" width=n height=n hspace=n vspace=n border=n>

Paramètres:

Le paramètre "src" est obligatoire et contient un URL ou un chemin relatif vers un fichier de format .gif ou .jpg ou .png

src="fichier.gif"

<img src="cow.gif">

• Le paramètre "align" permet de spécifier l'alignement de l'image par rapport au texte. Les valeurs possibles sont : top, bottom, middle, right, left

ALIGN = "TOP ou BOTTOM ou MIDDLE ou RIGHT ou LEFT"

<img src="cow.gif" align="LEFT">

• Le paramètre "alt" contient le commentaire que les personnes utilisant un browser textuel (sans images) voient à la place de l'image.

Paramètres (suite):

• Les paramètres "width" et "height" se réfèrent à la largeur et à la hauteur de l'image (en pixels). Utilisez cette procédure dans tous les cas , car cela permet de commencer à lire le texte avant que l'image ne soit chargée complètement.

WIDTH="n" HEIGHT="m" où n et m sont un nombre de pixels

<img src="cow.gif" width=85 height=67>

• Le paramètre "hspace" permet de spécifier la distance horizontale en pixels entre le texte environnant et le bord de l'image.

HSPACE="j" où j est un nombre de pixels

<img src="cow.gif" HSPACE="5">

• Le paramètre "vspace" permet de spécifier la distance verticale en pixels entre l'image et le texte qui l'entoure.

VSPACE="k" où k est un nombre de pixels

<img src="cow.gif" VSPACE="5">

• Le paramètre "border" permet de créer un cadre autour de l'image. La largeur de la bordure est exprimée en pixels.

BORDER="l" où l est un nombre de pixels

<img src="cow.gif" VSPACE="5">

Pour voir l'effet de la combinaison des paramètres dans l'insertion d'images reportez-vous à l'URL:

• http://tecfa.unige.ch/guides/htmlman/images_test.html

Exemple 9-1: Utilisation des paramètres d'insertion d'image

 

 

 

9.2 Formats et résolution d'image

La question critique dans l'utilisation d'images est le temps de téléchargement nécessaire.

Les stratégies possibles pour accélérer le chargement:

• spécifier la taille de l'image dans la commande "img".
• penser à la largeur standard minimum des écrans (800 X 600 pixels).
• réduire la taille du fichier. Mais ce que l'on gagne en volume de fichier, on le perd en qualité d'image.
• choisir une profondeur de couleur inférieure de 8 bits lorsque vous sauvez l'image après traitement. La couleur de chaque point est encodée par un certain nombre de bits. 8 bits correspond à une image en 256 couleurs.
• entrelacer les images en format GIF. Cette opération correspond à une fonctionnalité des logiciels de traitement d'image. L'effet lors du chargement de l'image est que le lecteur voit apparaître une image de faible résolution qui s'améliore par plusieurs passages successifs.
• pour les grandes images, utilisez une version de taille réduite (thumbnail) de l'image dans votre document et mettez-y un pointeur vers la version normale de votre image.

<a href="http://tecfa.unige.ch/~jermann/images/big_cow.gif">

<img src="http://tecfa.unige.ch/~jermann/images/nn_exposure.gif" align=left alt="a cow" hspace=15 ></a>