La balise img sert à embarquer une image dans un document html.
L'attribut src
L'attribut src (source) est indispensable
pour toute balise img puisque c'est avec cet attribut src que l'on va préciser
l'adresse où se situe cette image.
Cette adresse est indiquée en absolu ou en relatif.
Lorsqu'il faut remonter dans l'arborescence pour trouver un fichier, on utilise : ../ .
Exemple. Nous avons l'arborescence suivante :
Une flèche signifie ici "contient". Ainsi le répertoire nommé A contient les répertoires nommés divers et img.
Le fichier dans lequel nous écrivons se trouve dans le répertoire (ou dossier) nommé img. Dans ce fichier (il s'agit d'un fichier html), nous voulons créer un lien vers le fichier image roadSign.jpg et un lien vers le fichier image terre.png.
Le code ../ signifie que l'on sort du dossier parent (on remonte d'un niveau dans l'arbre).
On peut utiliser plusieurs fois ../ lorsque il est nécessaire de remonter de plusieurs niveaux : ../../../nom_repertoireA/nom_repertoireB/nomfichier.png.
L'attribut alt
L'attribut alt (alternative) est à ajouter systématiquement :
il permet un texte alternatif dans le cas où l'image ne s'affiche pas.
L'une des principales raisons d'une image non affichée est le réglage
du navigateur pour qu'il ne charge pas les images.
Ce peut être un choix notamment pour des personnes mal-voyantes.
L'absence de l'attribut alt sera considérée comme une erreur par le w3 validator.
Les dimensions
width et height
Deux attributs sont utilisés pour préciser
la dimension d'une image : width et height.
Les dimensions sont précisées comme dans l'exemple qui suit, sans unité
(l'unité est sous-entendue : il s'agit des dimensions en pixels).
Attention, un navigateur ne fait pas de traitement d'images.
Comme vous le constatez ci-dessus, lorsque vous imposez des
dimensions qui ne sont pas les dimensions réelles de l'image,
l'affichage obtenu est en général dégradé (voir la pixellisation au deuxième affichage).
Si de plus, vous ne respectez pas les proportions (troisième affichage), vous obtenez une image distordue.
Indiquer toujours width et height
Lorsque c'est possible, il est conseillé d'indiquer les dimensions width et height
de l'image, en indiquant les dimensions réelles.
Vous avez pu remarquer dans le premier exemple que l'affichage était correct et aux dimensions réelles
lorsque les dimensions ne sont pas indiquées. On pourrait donc se demander pourquoi les indiquer dans ce cas ?
L'utilité de les indiquer est de permettre un gain de temps au chargement de la page.
Cela permet au navigateur de connaître, avant d'avoir charger l'image, les dimensions à prendre en compte.
Petite image ciblant sur une grande
Vous avez certainement déjà rencontré des sites web présentant des dizaines d'images sur une même page.
Lorsqu'on clique sur l'image, le navigateur s'ouvre sur cette même image avec de plus grandes dimensions.
Cet effet n'est pas obtenu en modifiant width et heigth. En effet, cela n'aurait aucun intérêt :
l'avantage d'avoir de petites images est d'avoir des images de poids plus léger, donc plus rapidement
téléchargeables. Or modifier le width et le height dans le code html pour une image ne modifie en rien l'image,
ça ne modifie que son affichage : elle pésera donc aussi lourd !
Les formats d'image
Notion de format
Il existe de nombreux formats d'images comme jpeg, png, svg, tiff, bmp...
On reconnait le format par l'extension utilisée .png, .jpg, .svg ... dans le nom de l'image.
Comme les navigateurs ne reconnaissent pas tous les formats d'image,
il peut parfois être nécessaire d'enregistrer une image sous un autre format que le format dont on dispose initialement. Pour cela, il ne suffit pas de modifer l'extension du fichier image.
Un format d'image correspond en effet à une façon de coder les images,
le simple fait de modifier l'extension du nom de fichier n'a aucun effet
sur ce qui est écrit dans le fichier !
Formats reconnus par les navigateurs
Seuls quatre formats graphiques d'image sont reconnus nativement par les navigateurs actuels :
le format GIF (Graphics Interchange Format),
le formet JPEG (Joint Photographic Experts Group),
le format PNG (Portable Network Graphics),
le format SVG (Scalable Vector Graphic).
Le format svg est un format vectoriel : les images sont définies par des
propriétés mathématiques (translation, rotation, homothétie, courbes de Bézier...).
Les autres formats sont des formats bitmap : les images sont définies pixel par pixel.
Bulle d'aide (info bulle)
L'attribut title peut être utilisé sur de nombreux éléments html.
Il est fréquemment utilisé avec des images ou des liens.
Pour visualiser son rôle, passer la souris sur l'image ci-dessous.
