Les images


Poids et formats d'une image

HTML permet d'intégrer des images dans un document. Document (le fichier html) et images sont en général téléchargés à partir d'un ordinateur distant; le temps de téléchargement est un facteur important, il dépend du poids des fichiers, c'est à dire de leur taille en Ko (1Ko=1024 octets).
Pour un texte pur on a un un octet pour un caractère. Pour un texte html on peut avoir plus pour tenir compte des balises. Comment évaluer le poids d'une image ?

Codage des couleurs et fichiers bmp

Un fichier image-bitmap contient un tableau indiquant la couleur de chaque pixel. Pour une image de 300 sur 200, il y aura 60 000  pixels, donc 60 000 indications de couleur.
Les couleurs étant définies par des valeurs de rouge, de vert et de bleu allant de 0 à 255, il faut trois octets pour définir une couleur. Le tableau représentant l'image de 300 sur 200 contient donc 60 000x3 = 180 000 octets, soit environ 175Ko. C'est ce qu'on obtient en créant un fichier BMP avec Paint. Tester en créant une image de 300 sur 200 et l'enregistrer en couleurs 24 bits (c'est à dire 3 octets par couleurs). On obtient bien 175Ko. Noter que le contenu de l'image ne modifie pas la taille. En comptant une vitesse de téléchargement de 3Ko par seconde (c'est ainsi chez moi) cela représente presque une minute de téléchargement. C'est trop.

Utilisation de palettes

Pour minimiser le poids des images on peut utiliser la technique des palettes : on n'utilise que 256 couleurs parmi toutes celles qui sont possibles; le codage d'une couleur se fait alors avec un seul octet qui indique le numéro de la couleur parmi les 256 possibles. Le poids de l'image est divisé par 3. En enregistrant l'image précédente avec 256 couleurs, on obtient un fichier d'environ 60Ko. Cela représente encore 20 secondes de téléchargement.

Les fichiers GIF

Pour diminuer encore la taille de l'image, on peut utiliser un algorithme de compression/décompression : il s'agit de repérer les répétitions et de les coder. Dire "répéter 100 fois 12" est plus court que dire "12, 12, 12, 12, 12, .....". Les fichiers GIF utilisent un tel algorithme et ont donc une taille réduite. Convertissons notre image BMP 256 couleurs en un fichier GIF avec Paint Shop Pro. La taille obtenue dépend de la complexité de l'image. Pour une image très simple on peut descendre jusqu'à un poids de 1,5 Ko. Moins d'une seconde de téléchargement. C'est devenu acceptable. C'est pour cette raison que les fichiers GIF sont utilisés sur Internet et donc dans les documents HTML.
Caractéristiques : utilisation d'une palette de 256 couleurs et algorithme de compression/décompression.

Les fichiers JPEG

Une autre démarche consiste à conserver le codage sur 3 octets mais en gommant les nuances trop faibles. L'image est légèrement altérée mais peut être mieux compressée. C'est la méthode utilisée par les fichiers JPEG. L'exemple précédent fourni un fichier de 5,6 Ko. Les fichiers JPEG sont aussi utilisés sur Internet et donc dans les documents HTML. On utilise en général ce format pour les photographies où le nombre de couleurs est important.


Insérer une image dans un document html.

On peut utiliser les images de deux façons : image formant le fond, image incluse dans le corps du document.

Image formant le fond du document

Pour utiliser une image comme fond du document, il faut mettre en oeuvre l'attribut BACKGROUND de la balise BODY qui introduit le corps du document.

Exemple :

<BODY BACKGROUND="nom_fichier">

L'image est répétée autant de fois qu'il faut pour remplir l'espace occupé par le document dans la fenêtre du navigateur.

Image dans le corps du document

On peut inclure une image dans le corps du document en utilisant la balise IMG.

Exemple :

<IMG SRC="nom_fichier">

Cette balise admet un certain nombre d'attributs :

Le problème des adresses de fichiers

Lorsqu'on indique le nom du fichier image on doit fournir les renseignements permettant de le localiser de façon précise. Cela peut se faire par une URL complète. Si l'image se trouve sur le même ordinateur que le fichier html qui l'utilise, on donnera une adresse relative, l'adresse de base étant celle du fichier html. Cela se traduit de la façon suivante :
- si le fichier image.gif est dans le même répertoire que le fichier html le nom image.gif suffit
- si le fichier image.gif est dans un sous répertoire nommé images du répertoire du fichier html, on écrira images/image.gif. (on utilise un slash et non un anti-slash comme sous Windows).
- si le fichier image.gif est dans un sous répertoire nommé images du répertoire parent de celui contenant le fichier html, on écrira ../images/image.gif.
etc...


Liens hypertextes dans une image

Il est possible d'associer un lien hypertexte à certaines parties d'une image. On utilise pour cela une structure encadrée par les balises MAP et /MAP.
Entre ces deux balises, des balises AREA et /AREA permettent de définir des zones à cliquer. La balise AREA doit contenir les attributs suivants :

Enfin pour relier cette structure à une image :

Exemple :

<map name="defzones">
<area shape="rect" coords="21,20,55,53" 
 href="javascript:alert('Carré bleu !')"></area>
<area shape="circle" coords="68,99,18" 
 href="javascript:alert('Cercle rouge !')"></area>
<area shape="polygon" oords="124,46,178,29,216,63,188,97,151,88"
 href="javascript:alert('Polygone vert !)"></area>
</map>
<img src="images/map.gif" usemap="#defzones" border=0 width=264 height=150 alt="dessin">


Animations

GIFs animés

Les fichiers GIF peuvent contenir plusieurs images. Les navigateurs affichent alors successivement ces images ce qui donne une image animée.
Pour créer un GIF animé il faut un logiciel spécialisé. Microsoft en propose un simple et gratuit. Un autre accompagne Paint Shop Pro.

Flash

Ce logiciel permet de créer des animations évoluées en mode vectoriel : les images sont décrites géométriquement et non point par point ce qui donne des fichiers pas trop lourds.
Les navigateurs récents intègre la gestion des fichiers FLASH, les plus anciens doivent utiliser des plug-ins.
Pour intégrer un fichier Flash, utiliser la balise EMBED avec les attributs SRC (pour le nom de fichier), WIDTH et HEIGHT (pour les dimensions).

JavaScript

On peut obtenir des animations (par exemple des textes défilants) en utilisant des images et du JavaScript.

Java

Il existe des applets Java fournissant des animations. On utilise la balise APPLET pour les introduire.


Exercice

La mission consiste à réaliser une page contenant divers types d'images, que vous aurez créées vous-même ou récupérées sur Internet.