Introduction

Comme je le disais dans l'article HTML - Les liens hypertextes, les sites internet ne contenaient que du texte et des liens au tout début du Web. Mais ensuite, apparurent les images ! Cela fut une grande avancée dans l'esthétisme des sites web.
 Nous allons voir ce que nous pouvons faire en HTML pour implanter nos images.

À noter :
Les images ne sont pas techniquement insérées dans une page HTML, elles sont liées à la page. La balise img crée un espace réservé pour l'image.

Intégration d'une image

Pour intégrer une image dans notre HTML, nous allons utiliser la balise <img>. Cependant, il faut que le HTML sache où trouver l'image, on va donc utiliser l'attribut src pour indiquer le chemin d'accès du fichier.

<img src="img/paysage_gelé.jpg" >

Balise fermante... ou pas

Depuis HTML 5, la balise `img` n'a pas de balise fermante. Elle s'écrit ainsi :
<img src="img/paysage_gelé.jpg" >

et non comme ceci :
<img src="img/paysage_gelé.jpg" />

« Bah, pourtant, je le vois partout ! »

Oui, c'est tout à fait accepté, car il ne faut pas que les sites « cassent » ou que des messages d'alerte clignotent sur nos sites. Et puis, bon, ce n'est pas une question de sécurité, juste de syntaxe, alors, pour une question de rétroactivité, on accepte sans problème l'ancienne écriture avec la barre oblique de fermeture.

L'attribut alt

Bon, notre image s'affiche si vous avez indiqué le bon chemin d'accès. Youppiii !
Mais que se passe-t-il si vous n'avez pas affiché le bon chemin ? Vous allez obtenir une petite image qui ressemble à un fichier déchiré en deux morceaux. Cela ne fait pas très sérieux sur votre site. 

Vous ne devez pas non plus oublier les personnes malvoyantes qui utilisent un appareil pour lire le texte. Pour eux, cette petite image va être un souci. On appelle cela un problème d'accessibilité.
Lorsque vous choisissez le texte à placer dans l'attribut alt, pensez à ce qui va être lu par les lecteurs d'écran.

Et puis, il ne faut pas oublier les moteurs de recherche... ils cherchent aussi à savoir vers où pointent les liens. C'est un plus pour votre indexation si vous indiquez à quoi ils correspondent.

Pour éviter cette image de fichier brisé, et avoir quelque chose d'un peu plus propre, on va utiliser un nouvel attribut : alt. Vous allez lui donner un contenu qui indique ce qu'est cette image. C'est ce contenu qui s'affichera à la place de la petite image.

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" >

Admettons que l'image se trouve sur un autre serveur, vous allez pouvoir utiliser l' URL de l'image. Attention, l'URL de l'image, pas de l'article sur laquelle elle se trouve.

<img src="https://eridiane.fr/public/img/la-une/url.png" alt="Photo d'un paysage gelé" >

Problème avec les images sur un autre serveur

Il faut savoir que la loi française part du principe que tout ce qui est sur le web est privé. Vous n'avez donc normalement pas le droit de diriger une URL vers un site web qui ne vous appartient pas, sauf si vous avez l'accord de son propriétaire. 

Il y a un autre problème avec les URL pointant sur des images ou des vidéos : elles peuvent être supprimées par leurs auteurs et vous vous retrouverez avec un lien cassé.

Taille de l'image

Nous savons maintenant afficher une image. Mais si on veut avoir la main sur cette image et décider de sa taille ? Il faut savoir qu'il existe d'autres attributs comme « height » et « width » qui vont respectivement régler la hauteur et la largeur de notre image. La taille se calcule en pixels. Cependant, lorsque c'est possible, il vaut mieux régler le problème de taille d'une image en CSS. N'oubliez pas, le HTML est un langage de balisage, pas de design, ça, c'est le rôle du CSS.

Ici, on va spécifier une taille en largeur : 

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" width="500" >

On peut spécifier une taille en hauteur : 

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" height="500" >

On peut forcer l'affichage avec une hauteur et une largeur donnée. Attention, l'image risque d'être étirée : 

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" height="200" width="800">

Une info-bulle sur une image

Il peut être nécessaire, lorsque l'image a de l'importance, par exemple, de mettre un texte au survol sur une image. (J'ai déjà parlé des info-bulles dans cet article : Créer une info-bulle en HTML et CSS) 
Nous allons utiliser l'attribut `title` pour écrire cette information. Ainsi, lorsque l'utilisateur va passer son curseur sur l'image, une info-bulle va s'afficher.

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" height="200" width="800" title="Paysage gelé">

Image cliquable

Pour rendre une image cliquable, c'est-à-dire qu'elle permet d'avoir accès à une autre page, un autre site ou une autre partie du texte, via un lien (voir mon article sur le sujet : Les liens hypertextes), il suffit de l'entourer de la balise <a>. Cela donne : 

<a href="https://eridiane.fr/comprendre-url">
  <img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" height="200" width="800">
 </a>

Mettre une légende à une image

Il existe une technique pour mettre une légende à une image. Ce n'est d'ailleurs pas réservé à une image, cela peut être aussi un diagramme, voire un morceau de code. On va utiliser la balise <figure>, pour préciser sur quoi devra se rapporter la légende, et la balise <figcaption> pour indiquer le contenu de la légende. 
Voici comment cela se présente :

<figure>  
    <a href="https://eridiane.fr/comprendre-url">  
        <img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" height="200" width="800" title="Paysage gelé">  
    </a>    
    <figcaption>        
        <p>Photo personnelle prise en hiver 2023.</p>  
    </figcaption>
</figure>

Dans un prochain article, nous verrons les images adaptatives en HTML...