// Les images_____

insertion  -  texte alternatif - dimensions - habillage  |   lien >>

Insérer une image

Les images qui sont incorporées dans une page sont en fait des fichiers externes appelées par la page :

<img src="images/chien.gif" />

[L'attribut src sert à indiquer le chemin vers l'image selon une syntaxe identique à celle des liens]

Toutes les images que l'on veut utiliser doivent être placés dans le répertoire du site, sinon elles ne seraient pas retrouvées après publication de la page sur le serveur ; c'est pourquoi il est important de créer un sous-répertoire "images" destinées à contenir toutes les illustrations de votre site (cf organisation du site) : avant d'insérer une image dans un fichier, pensez à la copier dans ce répertoire.

Indiquer un texte commentant l'image

<img src="/images/camion.jpg"
alt="le camion de Marcel Duchamp au MOMA" title="le camion de Marcel Duchamp au MOMA" />

• L'attribut alt remplacera l'image si le navigateur n'affiche pas les images (problème technique, choix de l'internaute, navigateur vocal, ...), [contre exemple..]
  
  
• Par ailleurs, certains navigateurs (IE, ...) affichent ce texte lorsque l'on passe la souris sur l'image - cet effet sera obtenu dans Netscape ou Mozilla/Firefox avec l'attribut title.

Plutôt qu'un simple commentaire de l'image, placez un texte la complétant... vaut mieux que

Indiquer les dimensions de l'image

Vous pouvez spécifier la largeur et la hauteur désirée pour votre image : ces dimensions s'expriment généralement en pixels.

<img src="/images/fleurs.png" alt="..." title="..."
style="width:109px;height:84px" />

Si vous n'indiquez pas de dimensions pour l'image, elle s'affichera dans sa taille d'origine (mais cela facilite le travail du navigateur de lui indiquer quelle place prendra l'image).

On peut également exprimer la largeur en pourcentage par rapport à celle de la page (ou de la cellule de tableau) - dans ce cas, si on ne précise pas la hauteur, l'image conservera ses proportions.

<img src="../images/najac.jpg" style="width:100%" />

Attention : réduire les dimensions d'affichage d'une image ne réduit pas son poids : il est préférable de réduire les dimensions réelles de l'image (à l'aide d'un utilitaire tel que irfanview par exemple). D'autres traitements permettent d'optimiser une image

Habillage

Vous pouvez disposer les images par rapport au texte de différentes façons >>