<!-- BEGIN COPY / PASTE -->
    <!-- Using the loading attribute -->
    <img src="image.jpg" alt="Description" loading="lazy">

    <!-- Using Intersection Observer -->
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const images = document.querySelectorAll('img[data-src]');
        const config = { rootMargin: '0px 0px 50px 0px', threshold: 0.01 };
        
        let observer = new IntersectionObserver((entries, self) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const img = entry.target;
              img.src = img.dataset.src;
              self.unobserve(img);
            }
          });
        }, config);

        images.forEach(image => observer.observe(image));
      });
    </script>
    <!-- END COPY / PASTE -->