Chargement différé et images responsives : Guide pratique pour débutants

Le problème : Les images volumineuses

Les images sont généralement les fichiers les plus lourds d’une page web. Lorsqu’un utilisateur visite votre site, son navigateur tente de télécharger toutes les images, y compris celles situées en dessous du fold initial. Cela gaspille de la bande passante et ralentit considérablement le chargement initial, entraînant une mauvaise expérience utilisateur et de faibles scores Core Web Vitals.

La solution comporte deux volets :

1. Chargement différé (Lazy-Loading) : Retarder le chargement des images hors écran jusqu’à ce que l’utilisateur les approche en scrollant.
2. Images responsives (Responsive Images) : Fournir différentes tailles d’images pour différents écrans, afin que les utilisateurs mobiles n’aient pas à télécharger d’énormes images conçues pour desktop.

Heureusement, HTML moderne offre des fonctionnalités puissantes et faciles à utiliser pour les deux.

Partie 1 : Implémenter facilement le chargement différé

Autrefois, le chargement différé nécessitait des bibliothèques JavaScript complexes. Aujourd’hui, c’est simplement un attribut.

L’attribut loading="lazy" indique au navigateur de ne pas charger l’image avant qu’elle n’approche de la zone visible.

Comment l’implémenter :

Ajoutez simplement loading="lazy" à vos balises <img>.

<img src="mon-image.jpg" alt="Texte alternatif descriptif" loading="lazy" width="800" height="600">

Points importants :

• Incluez toujours les attributs width et height. Cela permet au navigateur de réserver l’espace correct avant le chargement de l’image, évitant ainsi les décalages de mise en page (CLS - Cumulative Layout Shift).
• N’utilisez pas le chargement différé sur toutes les images. Les images “above the fold” (visibles initialement) doivent se charger normalement. Leur appliquer loading="lazy" pourrait ralentir la perception de chargement. Utilisez cet attribut uniquement pour les images en dessous du fold initial.

Le support de loading="lazy" est désormais universel sur tous les navigateurs principaux, en faisant une méthode sûre et efficace pour améliorer les performances.

Partie 2 : Offrir les bonnes tailles avec srcset

Pourquoi un utilisateur mobile devrait-il télécharger une image de 2000px conçue pour desktop ? L’attribut srcset vous permet de proposer plusieurs versions d’une image. Le navigateur choisira intelligemment celle adaptée à la taille et résolution de l’écran.

Comment l’implémenter :

1. Créez plusieurs tailles d’image : Générez plusieurs versions. Un ensemble courant :

   • image-petite.jpg (ex: 480px de large)
   • image-moyenne.jpg (ex: 800px de large)
   • image-grande.jpg (ex: 1200px de large) Vous pouvez utiliser notre outil de redimensionnement pour créer ces tailles.

2. Utilisez l’attribut srcset : Listez chaque image avec son descripteur de largeur (w).

<img 
  srcset="image-petite.jpg 480w, 
          image-moyenne.jpg 800w, 
          image-grande.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="image-moyenne.jpg" 
  alt="Texte alternatif descriptif"
  loading="lazy"
  width="800" height="600">

Décryptage :

• srcset : Fournit la liste des images disponibles et leurs largeurs réelles
• sizes : Indique au navigateur quelle largeur occupera l’image selon la taille du viewport. Ici : “Si la largeur d’écran ≤ 600px, l’image fera 480px. Sinon, elle fera 800px”. Le navigateur utilise cela pour choisir la meilleure image dans srcset.
• src : Image de secours pour les anciens navigateurs sans support de srcset.

Partie 3 : Direction artistique avec <picture>

Parfois, vous ne voulez pas juste une version réduite, mais une image complètement différente. Exemple : un paysage horizontal sur desktop devient un portrait vertical sur mobile. C’est la “direction artistique”.

L’élément <picture> est parfait pour cela. Il permet de fournir plusieurs éléments <source>, le navigateur choisissant le premier correspondant.

Comment l’implémenter :

<picture>
  <!-- Affiche cette image si largeur d'écran ≤ 600px -->
  <source media="(max-width: 600px)" srcset="image-portrait.jpg">
  
  <!-- Sinon, affiche celle-ci -->
  <source media="(min-width: 601px)" srcset="image-paysage.jpg">
  
  <!-- Image de secours pour anciens navigateurs -->
  <img src="image-paysage.jpg" alt="Texte alternatif descriptif" loading="lazy" width="1200" height="600">
</picture>

Vous pouvez aussi utiliser <picture> pour proposer des formats modernes comme AVIF ou WebP avec dégradation vers JPEG :

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Texte alternatif descriptif">
</picture>

Créez ces formats avec notre convertisseur d’images.

Conclusion

En combinant ces trois fonctionnalités HTML modernes, vous construirez des sites web qui se chargent à une vitesse surprenante sur n’importe quel appareil.

• Utilisez loading="lazy" sur toutes les images sous le fold initial
• Utilisez srcset pour proposer différentes tailles d’une même image
• Utilisez <picture> quand vous avez besoin d’images différentes selon les écrans ou formats

Implémenter ces techniques est l’une des modifications les plus impactantes pour améliorer les performances web et les Core Web Vitals.