Images hors écran

Qu'est-ce qu'une image hors écran ?

Une image hors écran est tout simplement une image non visible par l'utilisateur lors du chargement de la page. Celle-ci se situe en dessous de la ligne de flottaison ou n'est pas visible sans intéraction de la part de l'utilisateur.

Pourquoi est-il utile de différer leur chargement ?

Il est utile de différer leur chargement après le chargement de toutes les ressources essentielles de la page afin de réduire le délai avant intéractivité et ainsi améliorer l'expérience utilisateur.

Comment faire ?

Il n'existe pas d'attribut HTML spécifique pour informer le navigateur que ces images sont à charger ultérieurement. Pour différer leur chargement il est donc nécessaire de faire appel à du code JavaScript qui s'occupera de charger l'image au moment adéquate.

Un exemple d'utilisation avec lazysizes, qui est un script permettant d'effectuer du lazy loading (chargement dynamique) et qui est optimisé pour le SEO :

• télécharger et inclure le script lazysizes

    ...
    <script src="lazysizes.min.js" async></script>
</body>

• ajouter la classe "lazyload" et changer l'attribut "src" pour "data-src" (utile au script) sur les images dont le chargement doit être différé

<img src="images/hors-ecran.jpg" alt="Mon Image hors écran">
<img class="lazyload" data-src="images/hors-ecran.jpg" alt="Mon Image hors écran">

• et voilà, l'image sera chargée après les ressources essentielles de la page