1. A propos de la balise IMG

La balise <img> informe le navigateur qu'il doit afficher une image. Pour utiliser cette balise, l'attribut SRC (source) est nécessaire, ce qui permet de spécifier l'emplacement de l'image à afficher. L'adresse aura le même format qu'une adresse <a href="">, ce qui signifie qu'elle peut être soit relative, soit absolue. En général, l'image sera hébergée sur le même serveur que le document HTML, bien qu'il soit possible de charger une image depuis un autre serveur, tant que celui-ci est accessible.

2. Syntaxe et usage de la balise IMG

La balise <IMG> est toujours couplée avec l'attribut 'source'. C'est ce dernier qui indique l'emplacement de l'image à afficher. Notez bien aussi que la balise <img> ne nécessite pas d'élément de fermeture (</img>), car elle est autonome. La syntaxe est la suivante :

1. img: balise qui indique au navigateur d'afficher un élément image.
2. src: indique la source de l'image (emplacement local, adresse url...)

Exemple

Nous allons afficher l'image qui setrouve à l'adresse url= "https://www.tresfacile.net/images/voiture.png":

Ce qui affiche au navigateur:

On pourra aussi utiliser l'attribut 'alt' qui veut dire texte alternative et qui sera afficher à la place de l'image lorsque cette dernière est indisponible. Notez bien que l'atribut 'alt' est utilisé par les moteurs de recherche en tant que description de l'image et sera un élément important pour le référencement SEO de l'image:

3. Liste des principaux attributs associés à la balise IMG

Nous allons citer dans ce paragraphe les principaux attributs de la balise IMG permettant de personnaliser l'affiche des images. Veuillez noter que certains attributs sont obsolètes ou moins couramment utilisés dans les versions HTML5 et les meilleures pratiques actuelles. Certains peuvent également être utilisés en combinaison avec d'autres éléments HTML pour des fonctionnalités plus avancées. Voici la liste des principaux attributs de la balise <img> en HTML, utilisée pour insérer des images dans une page web :

1. src : Spécifie l'adresse (URL) de l'image à afficher.
2. alt : Fournit un texte alternatif décrivant l'image (pour l'accessibilité et en cas de non-affichage de l'image).
3. width : Définit la largeur de l'image en pixels.
4. height : Définit la hauteur de l'image en pixels.
5. title : Affiche une infobulle lorsque l'utilisateur survole l'image.
6. align (obsolète) : Alignement de l'image par rapport au texte environnant.
7. border (obsolète) : Épaisseur de la bordure autour de l'image.
8. usemap : Associe une image à une carte d'images.
9. ismap : Indique si l'image est une carte d'images.
10. longdesc (obsolète) : Fournit un lien vers une description longue de l'image.
11. loading : Indique comment l'image doit être chargée (défaut, retardée, etc.).
12. referrerpolicy : Contrôle quelle information est incluse dans le champ Referer HTTP lorsque l'utilisateur clique sur l'image.
13. sizes : Indique les tailles d'affichage pour les images responsives.
14. srcset : Spécifie les différentes sources d'images pour les écrans à haute résolution et les appareils différents.
15. crossorigin : Indique comment gérer les demandes de ressources croisées.
16. loading : Indique comment l'image doit être chargée (paresseusement, immédiatement, etc.).

4. Exemples d'usage de la balise IMG

Dans le paragraphe précédent, nous avons cité les principaux attributs de la balise IMG. Maintenant nous allons voir sur des exemples simples, comment utiliser ces attributs.

Exemple (attributs width et height)

Ce qui affiche au navigateur:

Exemple (attributs align)

Ce qui affiche au navigateur:

Exemple (attributs title)

Ce qui affiche au navigateur lorsqu'on place le pointeur de la souris sur l'image:

 

Younes Derfoufi
CRMEF OUJDA