L'intégration d'images dans les documents HTML ne faisait pas partie des spécifications de départ. Il faut attendre février 1993 pour que Marc Andreessen propose le tag IMG qui permet de lier des images aux pages. Si "Une image vaut mille mots", il faut veillez à ce que cet adage ne se transforme pas en "Une image vaut mille maux" car si l'intégration d'une image dans du contenu se fait extrêmement facilement, il existe différents formats graphiques d'image et il faut veiller à utiliser le plus adapté pour avoir des fichiers le moins volumineux possibles et donc plus rapides à télécharger. |
Images et formats graphiques lire aussi tu dois.

On utilise la balise img pour embarquer une image dans du contenu. L'élément créé avec img est un élément vide qui n'a pas de balise de fermeture.

img ne peut pas être utilisé pour les images de fond de page ou de fond de blocs. Les images de fond sont gérées avec des règles de style CSS dont certaines propriétés sont spécialement faite pour gérer la disposition, la répétition, etc. des images de fond.

### L'attribut src

L'attribut `src` doit toujours être présent car c'est sa valeur qui va définir l'URL du fichier image à télécharger et à inclure dans la page. Bien sûr si l'image est un fichier situé dans un des dossiers de votre site, il faut utiliser une URL relative pour faire le lien.

Exemple : image
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Image</title> </head> <body> <img src="images/dv.png"> <img src="images/yoda.png"> <img src="../exemples/lord_rings/images/gimli.png"> <img src="../exemples/lord_rings/images/gandalf.png"> </body> </html>

Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille (à nouveau) d'adopter les règles suivantes :

- les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
- utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
- n'utilisez jamais d'espaces.

### Dimensions

Les attributs `width` et `height` permettent de donner la largeur et la hauteur de l'image. La valeur de ces attributs est simplement un nombre entier qui exprime la hauteur ou la largeur en pixels. Il ne faut surtout pas spécifier d'unité (le pixel) car la valeur ne serait pas prise en compte.

Exemple : dimensions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Dimensions</title> </head> <body> <img src="images/dv.png"> <img src="images/dv.png" width="133" height="147"> </body> </html>

Visuellement, il n'y aucune différence quand on ajoute les dimensions de l'image. En effet, si les dimensions ne sont pas données dans le code, le navigateur les calcule pour l'affichage.

Mais grand mâiêiïtre Jedi, alors pourquoi se compliquer la vie en donnant ces dimensions ?
Parce que, jeune Padawan, les pages s'afficheront plus vite. Le navigateur n'aura pas à attendre que l'image soit chargée depuis le serveur, puis passer quelques millisecondes à calculer sa taille. Il pourra tout de suite réserver l'espace nécessaire à l'affiche de l'image, faire le rendu des autres élements, et placer l'image quand il l'aura recu du serveur.

Spécifiez toujours la taille des images que vous intégrez dans une page Web.

Veillez à donner les dimensions correctes de l'image, sinon celle-ci sera déformée lors de son affichage par le navigateur.

Exemple : déformation d'images
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Déformation d'images</title> </head> <body> <!-- Taille originale --> <img src="images/dv.png" width="133" height="147"> <!-- Largeur modifiée --> <img src="images/dv.png" width="80" height="142"> <!-- Hauteur modifiée --> <img src="images/dv.png" width="133" height="294"> <!-- Hauteur et largeur modifiées --> <img src="images/dv.png" width="266" height="294"> </body> </html>

D'une façon générale, il faut éviter de donner des dimensions différentes des dimensions originales de l'image. Le rendu des images ainsi déformée n'est pas excellent car le navigateur n'est pas un outil de traitement d'images comme peuvent l'être des logiciels spécialisés (photoshop, Gimp, etc).
Remarque : le fait de réduire ou d'augmenter la taille de l'image affichée par le navigateur ne réduit pas ou n'augmente pas la taille du fichier transféré sur le réseau. Le nombre d'octets transférés sera toujours celui du fichier situé sur le serveur.

On utilise souvent des miniatures à la place des images de grandes tailles. En cliquant sur ces miniatures on voit l'image en taille réelle. Ces miniatures ne sont pas obtenues en reduisant les dimensions de l'image originale avec les attributs `width` et `height` car comme on l'a vu le navigateur n'est pas un logiciel de traitement d'images.
La miniature est obtenue par la réduction des dimensions de l'image originale avec un logiciel spécialisé (photoshop, Gimp, etc) ou d'un outil comme Easy Thumbnails.
On a donc 2 versions de l'image : une réduite et une à la taille originale. On affiche la réduite dans un lien qui pointe sur l'originale comme dans l'exemple suivant.

Exemple : miniatures
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Miniatures</title> </head> <body> <a href="images/sw_family.jpg" target="_blank"> <img src="images/sw_family_mini.jpg" width="150" height="107"> </a> <a href="images/sw_lego.jpg" target="_blank"> <img src="images/sw_lego_mini.jpg" width="171" height="107"> </a> <a href="images/lr_affiche.jpg" target="_blank"> <img src="images/lr_affiche_mini.jpg" width="134" height="107"> </a> <a href="images/lr_lego.jpg" target="_blank"> <img src="images/lr_lego_mini.jpg" width="190" height="107"> </a> </body> </html>

### Alignement

Par défaut, les images sont considérées comme des éléments de type en ligne. Dans un bloc de texte, elles se positionnent comme un caractère : le bas de l'image est affiché sur la ligne de base des caractères.

vocabulaire typographique
Image : http://commons.wikimedia.org/wiki/File:Anatomielettre.gif
Exemple : alignement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Alignement</title> </head> <body> <p>Yoda <img src="images/y01.png"> dans la Guerre des Etoiles est-il l'équivalent de Gandalf <img src="images/g01.png"> dans le Seigneur des Anneaux ?</p> <p>Les images sont volontairement encadrées en rouge pour bien signaler leur encombrement.</p> </body> </html>

Changer l'alignement par défaut est parfois nécessaire. Il faut alors utiliser la propriété de style CSS `vertical-align` comme le montre l'exemple suivant.
La valeur par défaut de la la propriété `vertical-align` est `baseline`.

Exemple : alignement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Alignement</title> <style> .align1 {vertical-align: text-bottom;} .align2 {vertical-align: text-top;} .align3 {vertical-align: bottom;} .align4 {vertical-align: middle;} .align5 {vertical-align: top;} </style> </head> <body> <h3>Aligné <img src="images/y01.png" class="align1"> avec <img src="images/g01.png" class="align1"> text-bottom.</h3> <h3>Aligné <img src="images/y01.png" class="align2"> avec <img src="images/g01.png" class="align2"> text-top.</h3> <h3>Aligné <img src="images/y01.png" class="align3"> avec <img src="images/g01.png" class="align3"> bottom.</h3> <h3>Aligné <img src="images/y01.png" class="align4"> avec <img src="images/g01.png" class="align4"> middle.</h3> <h3>Aligné <img src="images/y01.png" class="align5"> avec <img src="images/g01.png" class="align5"> top.</h3> </body> </html>

### L'attribut alt

Quand une image n'est pas là simplement pour un effet décoratif, il faudrait mettre un attribut `alt` (pour alternative textuelle) dont la valeur est un court texte descriptif de l'image. Ce texte sera :

- affiché à la place de l'image si celle-ci ne peut pas être téléchargée,
- lu par les applications spécialisées des personnes avec un handicap visuel
- utilisé par les moteurs de recherches pour leur indexation.

Exemple : attribut alt
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Attribut alt</title> </head> <body> <p>L'URL de l'image est volontairement fausse pour que la valeur de l'attribut alt soit affichée.</p> <img src="images/darkvador.png" alt="Dark Vador le grand méchant"> </body> </html>

Dans la suite de ce tutoriel et pour simplifier le code, nous n'utiliserons pas d'attribut `alt`.

### Bulle d'aide

On peut utiliser l'attribut `title` pour réaliser des bulles d'aide. Particulièrement utiles quand on utilise des images pour faire des liens, les bulles d'aide (ou infos bulle) affichent un cours texte quand le curseur de la souris stationne quelques dixièmes de secondes sur une image.

Exemple : bulles d'aide
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Bulles d'aide</title> </head> <body> <p>Laisser la souris sur les images.</p> <a href="#fauxlien"> <img src="images/gauche.png" width="32" height="32" title="Page précédente"></a> <a href="#fauxlien"> <img src="images/haut.png" width="32" height="32" title="Page d'accueil"></a> <a href="#fauxlien"> <img src="images/droite.png" width="32" height="32" title="Page suivante"></a> </body> </html>
Rappel : images et formats graphiques lire aussi tu dois.

### Images et textes (1)

Complétez le code HTML pour obtenir le résultat ci-dessous. images et textes | Les images dans la page se trouvent dans le dossier `images` du dossier `lord_rings` de l'arborescence suivante : arborescence de l'exercice
Nom fichier | Dimension
--- | ---
u.png | 48 X 44
a.png | 46 X 44
anneau.png | 60 X 52
google_maps.png | 210 X 40
anneaux_lies.png | 180 X 101

Code à compléter

Exercice : images et textes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Images et textes</title> <style> body {font-size: 24px;} .align1 {vertical-align: text-bottom;} .align2 {vertical-align: text-top;} .align3 {vertical-align: bottom;} .align4 {vertical-align: middle;} .align5 {vertical-align: top} </style> </head> <body> <p> <Un Anneau pour les gouverner tous,</p> <p> Un Anneau pour les trouver,</p> <p> Un Anneau pour les amener tous</p> <p> Et dans les ténèbres les lier.</p> </body> </html>

Une solution possible

Exercice : images et textes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Images et textes</title> <style> body {font-size: 24px;} .align1 {vertical-align: text-bottom;} .align2 {vertical-align: text-top;} .align3 {vertical-align: bottom;} .align4 {vertical-align: middle;} .align5 {vertical-align: top} </style> </head> <body> <p> <img src="../exemples/lord_rings/images/u.png" width="48" height="44">n <img src="../exemples/lord_rings/images/a.png" width="46" height="44">nneau pour les gouverner tous,</p> <p> Un <img src="../exemples/lord_rings/images/anneau.png" width="60" height="52" class="align4"> pour les trouver,</p> <p> Un Anneau pour les amener tous <img src="../exemples/lord_rings/images/google_maps.png" width="210" height="40" class="align4"></p> <p> Et dans les ténèbres les lier.<img src="../exemples/lord_rings/images/anneaux_lies.png" width="180" height="101" class="align5"> </p> </body> </html>

### Images et textes (2)

Complétez le code HTML pour obtenir le résultat ci-dessous. images et textes | Les images dans la page se trouvent dans l'arborescence suivante : arborescence de l'exercice

Nom fichier | Dimension | Dossier | Bulle
--- | --- | --- | ---
yoda.jpg | 200 X 148 | star_wars, images | Yoda
darkv.jpg | 200 X 148 | star_wars | Dark Vador
gandalf.jpg | 200 X 124 | lord_rings, images | Gandalf

Code à compléter

Exercice : images et textes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Images et textes</title> <style> .align1 {vertical-align: text-bottom;} .align2 {vertical-align: text-top;} .align3 {vertical-align: bottom;} .align4 {vertical-align: middle;} .align5 {vertical-align: top} p {border: 2px solid red; width: 500px;} .gauche {text-align: left;} .droite {text-align: right;} .centre {text-align: center;} .justifie {text-align: justify;} </style> </head> <body> <p></p> <p></p> <p></p> </body> </html>

Une solution possible

Exercice : images et textes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Images et textes</title> <style> .align1 {vertical-align: text-bottom;} .align2 {vertical-align: text-top;} .align3 {vertical-align: bottom;} .align4 {vertical-align: middle;} .align5 {vertical-align: top} p {border: 2px solid red; width: 500px;} .gauche {text-align: left;} .droite {text-align: right;} .centre {text-align: center;} .justifie {text-align: justify;} </style> </head> <body> <p> <img src="../exemples/star_wars/images/yoda.jpg" class="align4" width="200" height="148" title="Yoda"> Le côté obscur du Web redouter tu dois.</p> <p class="droite"> Pas sûr. Je suis passé du côté lumineux. <img src="../exemples/star_wars/darkv.jpg" class="align4" width="200" height="148" title="Dark Vador"></p> <p> <img src="../exemples/lord_rings/images/gandalf.jpg" class="align4" width="200" height="124" title="Gandalf"> Obscur ou lumineux, vous ne passerez pas.</p> </body> </html>