<div class="lazy-image-wrapper">
  <picture>
    
    <source
      type="image/webp"
      data-srcset="/assets/images/posts/photo-640w.webp 640w,
                   /assets/images/posts/photo-1280w.webp 1280w,
                   /assets/images/posts/photo-1920w.webp 1920w"
      sizes="(max-width: 640px) 640px, (max-width: 1280px) 1280px, 1920px"
    />

    
    <source
      type="image/jpeg"
      data-srcset="/assets/images/posts/photo-640w.jpg 640w,
                   /assets/images/posts/photo-1280w.jpg 1280w,
                   /assets/images/posts/photo-1920w.jpg 1920w"
      sizes="(max-width: 640px) 640px, (max-width: 1280px) 1280px, 1920px"
    />

    
    <img
      data-src="/assets/images/posts/photo.jpg"
      alt="Description"
      class="lazy-image "
      loading="lazy"
      width="1920"
      height="1440"
    />
  </picture>

  <noscript>
    <picture>
      <source
        type="image/webp"
        srcset="/assets/images/posts/photo-640w.webp 640w,
                /assets/images/posts/photo-1280w.webp 1280w,
                /assets/images/posts/photo-1920w.webp 1920w"
        sizes="(max-width: 640px) 640px, (max-width: 1280px) 1280px, 1920px"
      />
      <img
        src="/assets/images/posts/photo.jpg"
        srcset="/assets/images/posts/photo-640w.jpg 640w,
                /assets/images/posts/photo-1280w.jpg 1280w,
                /assets/images/posts/photo-1920w.jpg 1920w"
        sizes="(max-width: 640px) 640px, (max-width: 1280px) 1280px, 1920px"
        alt="Description"
        class=""
        width="1920"
        height="1440"
      />
    </picture>
  </noscript>
</div>

<script>
(function() {
  if (!window.lazyImageObserver) {
    window.lazyImageObserver = {
      init: function() {
        var images = document.querySelectorAll('img.lazy-image[data-src]');
        var sources = document.querySelectorAll('source[data-srcset]');

        // Function to load an image and its sources
        var loadImage = function(img) {
          // Load source elements first
          var picture = img.closest('picture');
          if (picture) {
            var pictureSources = picture.querySelectorAll('source[data-srcset]');
            pictureSources.forEach(function(source) {
              if (source.dataset.srcset) {
                source.srcset = source.dataset.srcset;
                source.removeAttribute('data-srcset');
              }
            });
          }

          // Load img element
          if (img.dataset.src) {
            img.src = img.dataset.src;
            img.removeAttribute('data-src');
            img.classList.add('lazy-loaded');

            if (window.performance && window.performance.mark) {
              performance.mark('image-loaded');
            }
          }
        };

        if ('loading' in HTMLImageElement.prototype) {
          // Native lazy loading support
          images.forEach(function(img) {
            loadImage(img);
          });
        } else if ('IntersectionObserver' in window) {
          // IntersectionObserver fallback
          var imageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
              if (entry.isIntersecting) {
                var img = entry.target;
                loadImage(img);
                observer.unobserve(img);
              }
            });
          }, {
            rootMargin: '50px'
          });

          images.forEach(function(img) {
            imageObserver.observe(img);
          });
        } else {
          // Fallback for older browsers - load everything
          images.forEach(function(img) {
            loadImage(img);
          });
        }
      }
    };

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', window.lazyImageObserver.init);
    } else {
      window.lazyImageObserver.init();
    }
  }
})();
</script>