Ce tutoriel aborde l'optimisation du chargement des images (Responsive Images) pour améliorer les performances et l'expérience utilisateur. Nous allons explorer deux méthodes natives du HTML pour servir la bonne taille d'image selon la résolution de l'écran : l'attribut srcset et la balise <picture>.
1. Problématique
L'utilisation d'une balise <img> standard (ex: une image de 1920x1280px pesant 300ko) force tous les utilisateurs, y compris ceux sur mobile avec une connexion faible, à télécharger l'image en pleine résolution. Cela gaspille de la bande passante et ralentit le rendu.
L'objectif est de mettre en place un chargement sélectif : le navigateur ne doit télécharger que l'image la plus adaptée à la taille actuelle du viewport.
2. La méthode srcset et sizes
Cette méthode permet au navigateur de choisir lui-même la meilleure image parmi une liste de candidats, en fonction de la densité de pixels et de la largeur d'affichage.
Le concept
Nous ajoutons deux attributs à la balise <img> :
srcset : Définit la liste des fichiers images et leur largeur réelle (avec le descripteur w).
sizes : Définit la taille que l'image occupera à l'écran via des Media Queries, aidant le navigateur à choisir le bon fichier avant de charger l'image.
Mise en pratique
Supposons que nous ayons plusieurs versions d'une image : min (320px), small (700px), medium (1100px) et big (1920px).
<img
src="/images/image-big.jpg"
alt="Description de l'image"
srcset="
/images/image-min.jpg 400w,
/images/image-small.jpg 700w,
/images/image-medium.jpg 1100w,
/images/image-big.jpg 1920w
"
sizes="
(max-width: 400px) 400px,
(max-width: 700px) 700px,
(max-width: 1100px) 1100px,
1920px
"
>
Fonctionnement détaillé
0px à 400px : Le navigateur détecte la condition (max-width: 400px). Il comprend qu'il a besoin d'une image de 400px de large. Il regarde le srcset, trouve 400w et charge image-min.jpg.
401px à 700px : La condition précédente est fausse. Il passe à (max-width: 700px). Il charge le fichier correspondant à 700w (image-small.jpg).
Au-delà de 1100px : Aucune condition sizes ne correspond, il utilise la valeur par défaut (la dernière) et charge image-big.jpg.
Note : Le navigateur est intelligent. S'il a déjà chargé une grande image (ex:
big) et que vous redimensionnez la fenêtre vers une taille plus petite, il gardera souvent la grande image en cache pour éviter un re-téléchargement inutile. À l'inverse, si on agrandit la fenêtre, il téléchargera la version supérieure si nécessaire.
3. La balise <picture>
La balise <picture> offre un contrôle plus strict et explicite (souvent appelé "Art Direction"). Elle permet de forcer le changement de source selon des conditions précises, voire de changer de format d'image (ex: passer de JPG à WebP) ou de ratio (carré sur mobile, paysage sur desktop).
Le concept
<picture> est un conteneur qui enveloppe plusieurs balises <source> et une balise <img> finale obligatoire. Le navigateur parcourt les sources de haut en bas et s'arrête à la première correspondance media.
Mise en pratique
Ici, nous ajoutons une très petite image carrée (thumb) pour les écrans inférieurs à 250px, puis nous reprenons la logique précédente.
<picture>
<!-- 1. Très petits écrans (< 250px) : Image carrée spécifique -->
<source media="(max-width: 250px)" srcset="/images/image-thumb.jpg">
<!-- 2. Mobiles (< 400px) -->
<source media="(max-width: 400px)" srcset="/images/image-min.jpg">
<!-- 3. Tablettes / Petits laptops (< 700px) -->
<source media="(max-width: 700px)" srcset="/images/image-small.jpg">
<!-- 4. Laptops (< 1100px) -->
<source media="(max-width: 1100px)" srcset="/images/image-medium.jpg">
<!-- 5. Fallback & Ecrans larges (Obligatoire) -->
<img src="/images/image-normal.jpg" alt="Description sémantique">
</picture>
Fonctionnement détaillé
Si le viewport fait 200px, la première condition (max-width: 250px) est vraie. Le navigateur charge image-thumb.jpg et ignore le reste.
Si le viewport fait 500px, il ignore les deux premières sources. Il s'arrête à (max-width: 700px) et charge image-small.jpg.
La balise <img> finale sert à deux choses :
Afficher l'image pour les navigateurs qui ne supportent pas <picture> (très anciens).
Servir de réceptacle visuel pour l'image chargée par les balises <source>. Sans elle, rien ne s'affiche.
C'est tout pour ce tutoriel sur les images adaptatives ! N'hésitez pas à utiliser ces techniques pour alléger vos pages et améliorer votre score SEO technique.
