Insérer des images dans une page web

Si vous avez suivi les précédents épisodes, vous savez maintenant comment insérer du contenu textuel dans vos pages, mais qu’en est-il des images ? Comment ajouter une jolie photo dans le contenu ? Nous allons découvrir tout ça maintenant !

La balise <img>

Il existe plusieurs moyens pour faire apparaître une image sur une page web, le plus simple est d’utiliser la balise <img>. Cette balise à la particularité de ne pas se fermer, elle fait donc partie des exceptions mentionnées plus tôt dans cette formation. Regardons ensemble la structure de cette balise :

<img src="images/chaton.webp" alt="Un chaton">

L’attribut src

On peut remarquer que la balise à deux attributs, le premier, src (même si l'ordre n’a pas d’importance) sert à spécifier le chemin vers le fichier image que l’on souhaite afficher. Ici, on peut aisément imaginer qu’il y a une photo chaton.webp qui se situe dans un dossier “images” lui-même dans le dossier “site” créé au début de la formation HTML.

Pour suivre cette partie, je vous invite également à créer un dossier “images” dans le dossier “site” présent sur le bureau de votre ordinateur, et à y insérer une image de votre choix. Attention tout de même, pour que ce soit plus simple pour vous, le nom de l’image ne doit pas comporter d’espaces ni de caractères spéciaux. Prenez par exemple une photo de chaton sur Google et renommez la “chaton.webp, faites aussi attention au format de l’image en la choisissant.

L’attribut alt

On remarque ensuite que le deuxième attribut alt n’apparait nulle part sur la page alors qu’il est correctement renseigné. C’est tout à fait normal, le texte compris dans l’attribut alt est utilisé en guise de texte alternatif, en clair, le texte ne sera affiché que lorsque l’image ne sera pas bien chargée (vous pouvez essayer en modifiant le chemin de l’image, par exemple, ajoutez volontairement une faute d'orthographe au nom de l’image). Vous remarquerez alors un petit carré suivi du texte renseigné dans l’attribut alt.

La présence de l’attribut alt est obligatoire, même si ce dernier n’est pas renseigné. L’attribut alt est ainsi présent, mais vide, comme cela :

<img src="images/chaton.webp" alt="">

Le texte alternatif sert également pour l’accessibilité web, il permet aux personnes utilisant un logiciel de lecture d’écran de comprendre ce que représente l’image. Le contenu de ce texte doit être une phrase correctement rédigé et non un amas de mots clés comme on retrouve parfois sur certains sites web.

L’attribut srcset

Pour accélérer le chargement des images sur internet, on utilise plusieurs types de procédés. L’un d’eux consiste à spécifier plusieurs versions d’une même image et de laisser le navigateur choisir l’image la plus adaptée à la situation. Pour cela, on ajoute l’attribut srcset à la balise <img> comme ceci :

<img src="images/chaton.webp" alt="Un chaton"
         srcset="images/chaton-small.webp 300w,
          images/chaton.webp 600w">

La mise en place de cet attribut nécessite donc de prévoir plusieurs tailles pour chaque image, c’est du travail et des fichiers en plus, mais pour un rendu plus propre.

L’attribut sizes

Avec la technique précédente, le navigateur choisi la taille de l’image en fonction de la résolution d’écran de l'appareil, peu importe la taille finale de l’image sur la page. Imaginez maintenant que vous avez une image qui ne doit occuper que 50 % de votre page, rien ne sert de charger une version en très haute définition si c’est pour l’afficher à la moitié de sa taille réelle. Autant charger directement une image deux fois plus petite.

<img src="images/chaton-medium.webp"
     srcset="images/chaton-small.webp 576w,
             images/chaton-medium.webp 768w,
             images/chaton-large.webp 992w"
     sizes="(min-width: 250px) 50vw , (min-width:500px) 25vw , 100vw"
     alt="Un chaton">

C’est pour ce cas de figure que l’attribut sizes a été imaginé, il va permettre au navigateur de gérer le fichier image à charger en fonction de la place occupée sur la page.

L’attribut title

Il est possible d’ajouter une étiquette lisible lorsque l’utilisateur laisse sa souris sur l’image.

C’est très simple à mettre en place, il suffit d’ajouter l’attribut title à l’image comme ici :

<img src="images/chaton.webp" alt="Un chaton" title="Un chaton dans l’herbe">

Il faut noter que l’attribut title fait partie des attributs universels (au même titre que id ou class) et donc que vous pouvez ajouter un titre à n’importe quel autre élément HTML, son comportement est adéquat aux images, d'où son usage ici. Maintenant, si vous souhaitez ajouter une légende visible tout le temps, il faut procéder autrement.

Ajouter une légende avec <figure> et <figcaption>

Nous allons nous intéresser à la balise <figure> qui permet d’ajouter une légende à un élément (pas forcément une image, mais je trouve que c’est le cas le plus fréquent). Pour mettre en place une légende, il faut entourer la balise <img> d’une balise <figure> et y ajouter une seconde balise <figcaption> comme ci-dessous :

<figure>
    <img src="images/chaton.webp" alt="Un chaton">
    <figcaption>Un chaton dans l’herbe</figcaption>
</figure>

La balise <picture>

Dans certains cas, nous souhaitons choisir la source d’une image en fonction de la résolution de l’appareil qui consulte le site internet. C’est pourquoi l’attribut <picture> existe, il permet de choisir un chemin de fichier différent en fonction de la résolution d’écran de l’utilisateur.

<picture>
    <source media="(max-width: 799px)" srcset="images/chaton-400.webp">
    <source media="(min-width: 800px)" srcset="images/chaton.webp">
    <img src="images/chaton.webp" alt="Un chaton">
</picture>

La balise <picture> est une balise qui va venir encadrer d’autres balises, par exemple la balise <source> qui permet de spécifier, une par une, les sources à charger en fonction de la résolution de l’écran.

Il faudra tout de même ajouter à l’intérieur, juste après les balises <source>, une balise <img> agissant en cas de dernier recours pour afficher une image.

Nous reverrons plus en détail cette balise et son comportement un peu particulier lorsque nous aborderons le “responsive design” dans la formation CSS.

Dans le prochain épisode, nous allons voir comment optimiser les images afin d’avoir un site le plus réactif et léger possible. Ensuite, vous pourrez faire une pause, promis, mais ne partez pas avant, l’optimisation des images est crucial pour un site web !