le HTML La balise IMG régit l'insertion d'images et d'autres objets graphiques statiques dans une page Web. Cette balise commune prend en charge plusieurs attributs obligatoires et facultatifs qui ajoutent de la richesse à votre capacité à concevoir un site Web attrayant et axé sur l'image.
Voici un exemple de balise HTML IMG entièrement formée:
Attributs de balise IMG requis
src="/chemin/vers/image.jpg"
Le seul attribut dont vous avez besoin pour afficher une image sur une page Web est le src attribut. Cet attribut identifie le nom et l'emplacement du fichier image à afficher.
alt="Description de l'image"
Pour écrire du XHTML et du HTML4 valides, le alt L'attribut est également requis. Cet attribut est utilisé pour fournir aux navigateurs non visuels un texte décrivant l'image. Les navigateurs affichent le texte alternatif de différentes manières. Certains l'affichent sous forme de pop-up lorsque vous placez votre souris sur l'image, d'autres l'affichent dans les propriétés lorsque vous faites un clic droit sur l'image, et certains ne l'affichent pas du tout.
Utilisez le texte alternatif pour donner des détails supplémentaires sur l'image qui ne sont pas pertinents ou importants pour le texte de la page Web. Mais n'oubliez pas que dans les lecteurs d'écran et les autres navigateurs texte uniquement, le texte sera lu en ligne avec le reste du texte de la page. Pour éviter toute confusion, utilisez un texte alternatif descriptif qui dit (par exemple) « À propos de la conception Web et du HTML » au lieu de simplement « logo ».
le alt le texte est également essentiel pour le référencement (Search Engine Optimization). Les robots que les moteurs de recherche, comme Google, utilisent pour explorer le contenu des sites ne peuvent pas "voir" les images. Ils s'appuient sur le alt texte pour déterminer ce qu'il y a sur la page.
Dans HTML5, les alt n'est pas toujours obligatoire, car vous pouvez utiliser un légende pour y ajouter plus de description. Vous pouvez également utiliser cet attribut pour indiquer un ID contenant une description complète:
aria-describedby="Description de l'image"
Le texte alternatif n'est pas non plus requis si l'image est purement décorative, comme un graphique en haut d'une page Web ou des icônes. Mais si vous n'êtes pas sûr, incluez du texte alternatif juste au cas où.
Attributs de dimensionnement
largeur="500"et.
hauteur="500"Selon votre conception, en utilisant le. la taille et. largeur
En règle générale, vous souhaiterez que la taille de l'image soit définie dans votre CSS. Le plus souvent, cela sera le résultat des dimensions du conteneur parent d'une image. Cette approche permet la plus grande flexibilité lors de l'adaptation à différentes tailles d'écran. Cependant, il existe encore des cas où vous souhaiterez peut-être spécifier les dimensions de l'image en tant qu'attributs HTML.
Autres attributs IMG utiles
title="Nom de l'image descriptive"L'attribut est un attribut global qui peut être appliqué à n'importe quel. élément HTML. De plus, le. Titre
La plupart des navigateurs prennent en charge le Titre attribut, mais ils le font de différentes manières. Certains affichent le texte sous forme de pop-up tandis que d'autres l'affichent dans des écrans d'information lorsque l'utilisateur fait un clic droit sur l'image. Vous pouvez utiliser le Titre attribut pour écrire des informations supplémentaires sur l'image, mais ne comptez pas sur cette information soit cachée ou alors visible. Vous ne devriez certainement pas l'utiliser pour masquer des mots-clés pour les moteurs de recherche. Cette pratique est désormais sanctionnée par la plupart des moteurs de recherche.
usemap=""et.
ismap=""Ces deux attributs sont définis côté client () et côté serveur (ISMAP) images cliquables
longdesc="Une description plus détaillée de votre image"Le. longdesc
Attributs IMG obsolètes et obsolètes
Plusieurs attributs sont désormais obsolètes en HTML5 ou dépréciés en HTML4. Pour le meilleur HTML, vous devriez trouver d'autres solutions au lieu d'utiliser ces attributs.
frontière="3"
align="gauche"Cet attribut vous permet de placer une image à l'intérieur du texte et de faire circuler le texte autour d'elle. Vous pouvez aligner une image à droite ou à gauche. Il a été déprécié au profit de la. propriété CSS flottante
hspcace="10"et.
vspace="10"Le. hspace et. espace virtuel les attributs ajoutent un espace blanc horizontalement ( hspace) et verticalement ( espace virtuel
lowsrc="/chemin/vers/lowres.jpg"Le. lowsrc L'attribut fournit une image alternative lorsque votre source d'image est si volumineuse qu'elle se télécharge extrêmement lentement. Par exemple, vous pouvez avoir une image de 500 Ko que vous souhaitez afficher sur votre page Web, mais le téléchargement de 500 Ko prendrait beaucoup de temps. Vous créez donc une copie beaucoup plus petite de l'image, peut-être en noir et blanc ou simplement extrêmement optimisée, et la placez dans le fichier. lowsrc
le lowsrc L'attribut a été ajouté à Netscape Navigator 2.0 à la balise. Il faisait partie du DOM niveau 1, mais a ensuite été retiré du DOM niveau 2. La prise en charge par les navigateurs de cet attribut est sommaire, bien que de nombreux sites prétendent qu'elle est prise en charge par tous les navigateurs modernes. Il n'est pas déprécié en HTML4 ou obsolète en HTML5 car il n'a jamais fait partie officielle de l'une ou l'autre des spécifications.
Évitez d'utiliser cet attribut et optimisez plutôt vos images pour qu'elles se chargent rapidement. La vitesse de chargement des pages est un élément essentiel d'une bonne conception Web, et les images volumineuses ralentissent énormément les pages, même si vous utilisez le lowsrc attribut.