Différer les images hors écran

Une image située loin sous le contenu initial peut être téléchargée avant même que la personne ne la voie. Ce transfert consomme des ressources et peut retarder le chargement d’éléments plus utiles. Vous allez apprendre à différer les images hors écran sans pénaliser l’affiche principale de la page.

Quand différer une image

L’attribut HTML `loading="lazy"` demande au navigateur de différer le chargement d’une image jusqu’à ce qu’elle approche de la zone visible. Le navigateur choisit le moment exact : cette indication ne fixe ni une distance précise ni une durée. Le comportement s’adapte ainsi à la taille de l’écran et au défilement.

Appliquez cette indication aux images qui se trouvent suffisamment bas dans la page pour ne pas contribuer à son affichage initial. Ne l’ajoutez pas systématiquement à toutes les images : une image visible dès l’arrivée, notamment l’image principale d’un événement, doit pouvoir commencer à se charger immédiatement. Pour les dimensions intrinsèques `width` et `height`, reportez-vous à la leçon « Réserver l’espace des images ».

Appliquer la règle au projet

Dans la page de l’association, l’affiche de la Soirée des cultures est l’unique image du contenu et elle est marquée comme prioritaire avec `fetchpriority="high"`. Elle ne constitue donc pas une bonne candidate au chargement différé : conservez-la sans `loading="lazy"`. À l’état actuel du projet, le changement correct consiste à ne pas modifier cette image.

Si vous ajoutez ultérieurement une image décorative ou une photographie d’un événement placé plus bas dans le document, et si cette image n’est pas attendue à l’affichage initial, ajoutez `loading="lazy"` à son élément `img`. Par exemple, sur une telle image, l’attribut se présente sous la forme `loading="lazy"` ; gardez aussi ses dimensions adaptées au fichier. N’ajoutez pas une deuxième image à la page uniquement pour appliquer cette technique : le choix dépend du contenu réellement publié.

Vérifier le résultat

Pour contrôler une image différée, ouvrez la page dans le navigateur, examinez l’élément dans les outils de développement et vérifiez que l’attribut est présent sur la bonne image. Faites ensuite défiler la page vers elle : le navigateur doit pouvoir la charger à l’approche de la zone visible. La mise en cache ou la vitesse du réseau peuvent rendre le moment du téléchargement difficile à observer ; ne concluez pas à partir d’un seul chargement.

Vérifiez également que l’image prioritaire n’a pas reçu `loading="lazy"` par erreur et qu’aucune image n’a perdu ses dimensions. Cette leçon ne demande donc aucune modification de `index.html`, de `style.css` ou de `newsletter.js` pour l’état actuel du projet : la page ne contient pas d’image hors écran à différer. Le choix d’une ressource critique et son préchargement seront abordés dans la prochaine leçon.

À retenir

• `loading="lazy"` convient aux images hors écran, chargées à l’approche de la zone visible.
• Ne différez pas une image nécessaire à l’affichage initial ou marquée comme prioritaire.
• Choisissez les images à différer selon leur emplacement et leur rôle, et non par automatisme.
• Dans l’état actuel du projet, conservez l’affiche prioritaire sans chargement différé : aucune autre image n’est à traiter.