Les balises :: Gestion des images

Comment afficher des images sur une page web?

Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité.

La balise IMG du langage html permet d'insérer des images dans une page html. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son url complète.

Seuls les formats d'images suivants sont acceptés en standard dans les spécifications du W3C :

Les principaux attributs de la balise IMG sont les suivants :

Ainsi pour insérer une image, il faudra saisir une balise du type suivant :

 

<img src="url_de_l_image" alt="Texte remplaçant l'image" title="Texte à afficher">

vers le haut

Les attributs

Attribut Valeur Résultat
align bottom
center
left
middle
top
right
alignement de l'image.
ALT   Texte alternatif au cas où l'image ne s'affiche pas.
border nombre entier nombre de pixels de la bordure. La couleur de la bordure peut être définie par l'attribut LINK ou TEXT de la balise <body>. Par défaut l'attribut border vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas avoir ce désagrément pensez à le définir comme étant égal à 0.
HEIGHT nombre entier Hauteur de l'image (en pixels ou en %). Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité.
HSPACE nombre entier nombre de pixels d'ajustement entre l'image et le texte adjacent (horizontalement).
LONGDESC   url de la description de l'image.
LOWsrc url Image alternative (généralemnt plus petite) affichée le temps que la vraie image soit chargée par le navigateur.
name   Permet de définir un nom pour l'image. Cet attribut est notamment utile pour la gestion des images en JavaScript.
src url url de l'image
title   Texte alternatif au cas où l'image ne s'affiche pas.
USEMAP   url ou nom de l'ancre définissant l'image réactive.
VSPACE   nombre de pixels d'ajustement entre l'image et le texte (verticalement).
width nombre entier Largeur de l'image (en pixels ou en %). Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité.

 


vers le haut

Les exemples

lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" width="33%" height="33%" hspace="5" vspace="7"> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla

lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" width="100px" height="100px" hspace="5" vspace="5"> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla

lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace=5 vspace=5>


lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace="5" vspace="5" align="top"> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla


lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace="5" vspace="5" align="middle"> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla

lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace="5" vspace="5" align="botton"> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla


lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace="5" vspace="5" align="left"> blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla



lezard orange<img src="../images/VARAN.GIF" alt="lezard orange" hspace="5" vspace="5" align="right" /> bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla




lezard orange <img src="../images/VARAN.GIF" alt="lezard orange" hspace="50" vspace="5" align="left"/> blablabla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blablabla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla bla blabla bla blabla bla blabla bla bla bla bla blabla


lien avec une image : <a href="liens.html"><img src="../images/VARAN.GIF" alt hspace="5" vspace="5"" border=0"orange></a>