Snippet d'explication du principe de lazyload du background CSS différencié de l'image principale

lazyload-bkgnd-img-idea.html

<!-- Avant le chargement du JS -->
<section data-background-url="URL_TO_BKGND"><!-- Ici le pattern de fond du bloc, qui sera intégré après le chargement du HTML & CSS sous la forme d'un style inline via JS -->
  <img src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" data-src="URL_TO_HUMAN" alt="">
  <noscript>
    <img src="URL_TO_HUMAN" alt="A117_ALT_TEXT">
  </noscript>
  <h*></h*><!-- Titre de la section, si nécessaire -->
  <p></p><!-- Contenu de la section -->
</section><!-- ./section -->


<!-- Après le chargement du JS -->
<section style="background-image: url('URL_TO_BKGND');"><!-- Le background chargé en inline -->
  <img src="URL_TO_HUMAN" alt="A117_ALT_TEXT"><!-- L'image ajoutée via JS depuis les données data- -->
  <noscript>
    <img src="URL_TO_HUMAN" alt="A117_ALT_TEXT">
  </noscript>
  <h*></h*><!-- Titre de la section, si nécessaire -->
  <p></p><!-- Contenu de la section -->
</section><!-- ./section -->