: xhtml

Insertion d'images en html: l'élément img

Les images de contenu sont insérées à l'aide de l'élément img.

Attributs principaux de la balise <img>

src

L'attribut src est obligatoire et permet de spécifier l'url de l'image à insérer dans la page

alt

L'attribut alt est obligatoire et permet d'entrer un texte alternatif au cas où l'image ne s'afficherait pas. Il doit être renseigné avec discernement afin de transmettre les informations utiles véhiculées par l'image. 2 articles pour approfondir la question: Bien utiliser le texte alternatif, des images accessibles

Il s'avère indispensable non seulement pour que les personnes n'ayant pas accès aux images (mal-voyants, navigateur textuel, erreur au chargement de l'image,...) reçoivent l'information mais aussi pour un référencement optimal.

Les images à but décoratif devraient être insérées par le biais des css et non comme contenu html. S'il était néanmoins nécessaire d'avoir une image décorative dans le html, on lui attribuera un alt vide de manière à indiquer qu'elle ne véhicule aucune information opportune.

Le alt doit être bref, 150, voir 60 caractères d'après www.accessibiliteweb.org. S'il est nécessaire d'avoir un descriptif plus long, on fera appel à l'attribut longdesc.

width et height

Les attributs width et height permettent de spécifier respectivement la largeur et la hauteur de l'image. On affiche la valeur sans unité (= pixels) ou alors on peut spécifier qu'il s'agit de %.

Par le passé, il était d'usage de toujours spécifier le width et height quand bien même on affichait l'image à sa taille d'origine afin de permettre au navigateur de connaitre la taille des image avant leur téléchargement pour pouvoir construire la page correctement. Actuellement ces informations sont sujette à polémique (certains pensent que cela devrait relever du css plus que d'un attribut html)et sont souvent omises lors de la construction des pages.

Elles restent cependant nécessaires, comme le montre cette page, que Firefox2 est incapable de rendre correctement au premier affichage vu qu'il ne connait pas la taille de l'image. On constate que la même page, avec cette fois-ci les attribut width et height de l'image renseignés s'affiche quant à elle correctement.

Les attributs width et height permettent aussi de redimensionner la taille d'affichage de l'image. Si seule l'une des deux dimensions est spécifiée, l'autre est calculée par le navigateur afin de conserver les même proportions. Cependant se redimensionnement est à effectuer avec prudence:

L'utilisation de vignettes préfabriquées peut donc s'avérer plus judicieux dans bien des cas

longdesc

Cet attribut permet de pointer vers un fichier externe afin de contenir une description détaillée de l'image. Par exemple, dans le cas d'un organigramme à décrire, l'attribut alt pourrait signifier qu'il s'agit de l'organigramme d'organisation de la société et le longdesc décrirait chaque élément de l'organigramme ainsi que leurs relations entre eux.

Editer