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 ?
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.
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.
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.
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.
On peut utiliser les images de deux façons : image formant le fond, image incluse dans le corps 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.
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 :
<IMG SRC="nom_fichier" ALT="Mon image">
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...
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">
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.
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).
On peut obtenir des animations (par exemple des textes défilants) en utilisant des images et du JavaScript.
Il existe des applets Java fournissant des animations. On utilise la balise APPLET pour les introduire.
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.