La balise img

La balise img crée une image. Le chemin vers l'image est spécifié dans l'attribut src. Ne nécessite pas de balise fermante.

Attributs

Attribut	Description
src	Définit le chemin vers l'image. Attribut obligatoire.
alt	Texte alternatif qui sera affiché à la place de l'image, si elle n'est pas trouvée (par exemple, si le chemin est incorrect). Attribut obligatoire. En son absence, le validateur (programme qui vérifie la correction du HTML ou du CSS) générera une erreur.
width	Largeur de l'image, en pixels (dans ce cas, les unités de mesure ne sont pas spécifiées) ou en pourcentage du parent de l'image.
height	Hauteur de l'image, en pixels (dans ce cas, les unités de mesure ne sont pas spécifiées) ou en pourcentage du parent de l'image.

Nuances

Si ni la largeur ni la hauteur ne sont définies pour une image - l'image aura sa taille réelle. Si la hauteur est définie - l'image prendra la hauteur spécifiée, et la largeur s'ajustera automatiquement pour que ses proportions ne soient pas déformées.

Si seule la largeur est définie - de même, l'image s'ajustera en hauteur pour préserver ses proportions.

Si la largeur et la hauteur sont toutes deux définies - les proportions de l'image peuvent être déformées (ou pas, selon votre chance). Si la largeur ou la hauteur (ou les deux ensemble) sont supérieures à la taille réelle - l'image sera agrandie, mais perdra en qualité.

Il est recommandé de définir la largeur et la hauteur des images dans les attributs (plutôt que via le CSS) - dans ce cas, le navigateur chargera les images plus rapidement - il n'a pas besoin de calculer la taille de chaque image après l'avoir reçue.

Il n'est pas recommandé de réduire les tailles réelles de l'image sans nécessité. Par exemple, la taille réelle de l'image est de 1000 sur 1000 pixels, et vous lui attribuez une largeur de 100px. Dans ce cas, l'image à l'écran aura une apparence de 100 pixels, mais aura une taille de mille pixels et, par conséquent, se chargera beaucoup plus lentement.

Exemple

Ajoutons une image au site et ne définissons pas les attributs height et width. L'image aura sa taille réelle :

:

Exemple

Essayons d'ajouter une largeur à l'image en utilisant l'attribut width, la hauteur devrait alors s'ajuster pour préserver les proportions de l'image :

:

Exemple

Maintenant, ajoutons une hauteur à l'image en utilisant l'attribut height, la largeur s'ajustera alors pour préserver les proportions de l'image :

:

Exemple

Ajoutons simultanément une hauteur et une largeur à l'image. Les proportions de l'image devraient alors être déformées (pas nécessairement, mais dans ce cas, la hauteur et la largeur sont choisies de manière à déformer les proportions) :

:

Exemple

Mettons un chemin incorrect vers l'image (pour simplifier, laissons-le vide). Au lieu de l'image, nous verrons le contenu de l'attribut alt (il semble que ce soit un texte ordinaire - mais essayez de le copier - vous n'y arriverez pas, il se comportera comme une image) :

:

Voir aussi