Le HTML --> Chapitre 4 : images
4. IMAGES

1. Introduction
2. Image & lien
3. Propriétés de l'image 		4. Textures de fond
5. Le choix entre GIF et JPG

Comment insérer une image ?

L'insertion d'une image se fait au moyen de l'instruction <IMG SRC=""> (où il faut mettre le nom de l'image (et éventuellement le chemin d'accès) entre les guillemets. Cette image doit être au format Gif ou Jpg (la quasi-totalité des éditeurs d'images savent enregistrer les images dans ces formats).
Lorsque l'image que vous insérez se trouve dans un sous dossier par rapport au dossier dans lequel le .htm qui fait appel à l'image, il faudra alors l'indiquer.
Prenons un exemple. Votre fichier .htm (appelons le page1.htm) est dans le dossier C:\Windows\Bureau\Siteweb\ et l'image (disons image1.gif) que vous voulez insérer est dans le dossier C:\Windows\Bureau\Siteweb\dossier\ . Pour mieux comprendre, regardez le schéma ci-contre.

Le code sera alors : 
<HTML>
<HEAD>
	<TITLE>Insertion d'une image située dans un sous-dossier</TITLE>
</HEAD>
<BODY>

<IMG SRC="dossier/image1.gif">

</BODY>
</HTML>
Vous remarquez alors qu'on indique le nom du sous-dossier suivi d'un / (et non d'un \ : attention, c'est souvent source d'erreur !).


Imaginons maintenant que l'image que vous voulez insérer se trouve dans le dossier parent par rapport au fichier html qui y fait réréfence (cf schéma ci-contre).


Le code source sera alors : 
<HTML>
<HEAD>
	<TITLE>Insertion d'une image se trouvant dans le dossier parent</TITLE>
</HEAD>
<BODY>

<IMG SRC="../image1.gif">

</BODY>
</HTML>
Vous remarquez alors que le dossier parent est indiqué par ../

Attention !
Dans le chemin d'accès de votre <IMG SRC="">, jamais on ne doit voir apparaître C:, etc... En effet, une fois que votre site sera envoyé sur un serveur, C: n'existera plus ! Il faut simplement raisonner avec des sous-dossiers ou des dossiers parents, comme ci-dessus.


Image et liens

Il est tout à fait possible d'insérer une image en tant que lien vers un fichier ou une autre page internet. Dans ce cas, on met le <IMG SRC=""> entre les balises <A HREF=""> et </A>. Il est également possible de faire en sorte que le même lien soit constitué et d'une image, et d'un texte. Exemple :

<A HREF="page2.htm">
<IMG SRC="image.gif">texte
</A>
Propriétés de l'instruction IMG

L'instruction IMG possède différentes propriétés plus ou moins utiles.
Les textures de fond

Plutôt que de mettre un fond de page de couleur unie, il est parfois plus joli de mettre une texture de fond (par exemple cette page a une texture de fond). La texture de fond, qui est en fait une image (prévue à cet effet) répétée plusieurs fois, se choisit avec la propriété BACKGROUND="" de l'instruction BODY. Exemple :
<HTML>
<HEAD>
	<TITLE>Le titre de votre page</TITLE>
</HEAD>
<BODY BGCOLOR="#F0F0F0" BACKGROUND="texture.gif" TEXT="Black" LINK="Blue">

Contenu de la page

</BODY>
</HTML>
Dans ce cas, s'il y a un BGCOLOR déjà attribué à la balise BODY, c'est le BACKGROUND qui est pris en priorité, par rapport à la couleur unie définie par le BGCOLOR. BGCOLOR ne sert donc plus à rien, mais il vaut tout de même mieux le mettre (avec une couleur unie qui représente la "couleur moyenne" de la texture que l'on veut insérer, par exemple dans cette page ça serait le gris clair), au cas où l'image de la texture serait manquante. Dans ce cas, le BGCOLOR est interprété par le navigateur, et ça permet d'avoir une page lisible, même si moins belle que prévue.

Le choix entre GIF et JPG

Ceci sort du cadre de l'apprentissage du langage HTML, mais il vaut mieux en parler, car c'est très utile pour faire un site web où les images sont de bonne qualité et rapides à charger.
Tout d'abord, il ne faut surtout pas utiliser le format d'enregistrement d'images Bitmap (.bmp) qui est un format non-compressé. L'image sera alors très longue à charger.
Sur internet, il existe principalement 2 formats de d'enregistrement d'images, à savoir le GIF et le JPG. Ils permettent tous les deux de réduire la taille (en octets, pas en résolution) de l'image, mais pas de la même façon. Ainsi parfois sera-t-il préférable d'enregistrer l'image en GIF, et pour une autre, le JPG sera le meilleur format.
Format JPG Format GIF
Atouts Contraintes Atouts Contraintes
  • Enregistrement des images en 16 millions de couleurs : le JPG est donc un bon format pour les photos.
  • Forte compression, surtout pour les photos, qui contiennent principalement des dégradés.
  • La compression déteriore l'image, mais cela n'est pas très visible (sur les photos) quand on choisit une compression plutôt faible via son logiciel de retouche d'images.
  • La compression est mauvaise pour des images simples (schémas, petits icones améliorant la navigation, ...), comportant peu de couleurs.
  • Le GIF ne déteriore pas l'image, en dehors du fait que parfois il faut convertir l'image de 16 millions de couleurs vers du 256 couleurs, ce qui réduira la qualité. Par contre, si l'image ne comporte déjà pas beaucoup de couleurs, il n'y a pas de déterioration.
  • Le fait que l'on peut utiliser 256 couleurs au maximum réduit la taille en octets de l'image.
  • La compression est bonne pour tout ce qui est schémas et autres petites images.
  • Le GIF gère la couleur transparente, très utile pour les sites web où il y a une texture de fond.
  • On ne peut utiliser que 256 couleurs au maximum : le GIF n'est donc pas un bon format pour les photos.
    • Exemple d'images où le JPG est le meilleur format :


    (15Ko contre 33Ko en GIF, et en plus joli).     		Exemples d'images où le GIF est le meilleur format :

    (11Ko contre 32Ko en JPG, et en plus joli).

    (1Ko, avec transparence).