Introduction

Après avoir vu comment insérer des images dans votre page web en HTML, nous allons voir des notions un peu plus avancées :
- Comment rendre ses images adaptatives (Vous pouvez aussi trouver le terme « responsives » ).
- Comment mettre plusieurs liens sur une même image ?

Images adaptatives

Lorsque l'on travaille à la création d'un site web, on doit veiller à ce qu'il s'affiche sur des écrans de types différents, et donc, de tailles différentes (Écran de bureau, mobile, tablette, etc. ). En principe, on va gérer cela en CSS et c'est ce que je recommande. Mais pour que cet affichage soit optimisé, il faut aussi le gérer en HTML.
Par exemple, si un utilisateur regarde votre site sur un mobile et que vous avez prévu une image de grande taille pour qu'elle s'affiche aussi sur un écran 4k, vous comprenez bien que cela va demander beaucoup plus de temps et de bandes passantes pour l'afficher sur un mobile.

Nous allons devoir installer plusieurs tailles d'images sur notre site, puis nous allons préciser quelles images utiliser par rapport à quelles tailles d'écran. Pour ce faire, nous tirerons parti des attributs scrset et sizes.

Pour vous expliquer comment cela fonctionne, j'ai fait un petit tutoriel, et j'ai mis sur un dépôt distant le code qui va suivre.
Commençons !

Nous avons une image appelée : image_adaptative.jpg.
Nous aurons besoin de plusieurs versions de cette image avec des tailles différentes :

- image_adaptative_300.jpg ;
- image_adaptative_1200.jpg ;
- image_adaptative_1600.jpg ;

srcset va permettre d'indiquer des images de tailles différentes, utilisées pour l'affichage.
sizes va permettre de définir les différentes conditions d'affichage.

On va, tout d'abord, indiquer l'image par défaut :

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

Ensuite, on va indiquer toutes les versions de l'image en indiquant leur dimension, mais pas n'importe quelle dimension. Vous allez donner la longueur de l'image en w (w pour width, longueur en anglais). Vous savez, quand vous regardez les propriétés d'une image, vous avez sa longueur et sa largeur... Vous allez le faire pour chaque taille d'image. Dans notre cas, cela donne :

<img src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" srcset="img/paysage_gelé-1200w.jpg 1200w,img/paysage_gelé-400w.jpg 400w,img/paysage_gelé.jpg 800w" >

Ensuite, nous allons indiquer à notre navigateur internet comment les afficher avec l'attribut sizes : 

<img srcset="img/paysage_gelé-1200w.jpg 1200w,img/paysage_gelé-400w.jpg 400w, img/paysage_gelé.jpg 800w" sizes="(min-width: 1201px) 1200w, (max-width: 600w) 400w, 800w" src="img/paysage_gelé.jpg" alt="Photo d'un paysage gelé" >

Dans notre cas, nous voulons que, par défaut, cela soit un écran de 800 de large, et donc, que cela soit l'image « paysage_gelé.jpg ». Mais si la taille de l'écran est de 600 ou en dessous, alors c'est l'image référencée en 400 et si l'écran dépasse 1200, alors c'est l'image référencé en 1200 qui s'affiche.

Ainsi, notre code sera optimisé par rapport à la taille de l'affichage demandé. Vous pouvez le vérifier en faisant varier la taille de votre navigateur.