SEO Improvements - Loading a Low-Resolution Image on Initial Page Load

Loading a low-resolution image initially and then swap it with a high-resolution image after the page has finished loading while also supporting different screen sizes, you'll need to use JavaScript in combination with responsive image techniques.

Here's a comprehensive approach to achieve that:

JavaScript Approach with Responsive Images and Lazy Loading

<img src="low-res.webp"
     data-src-mobile="high-res-mobile.webp" 
     data-src-tablet="high-res-tablet.webp" 
     data-src-desktop="high-res-desktop.webp" 
     alt="Image description" 
     class="lazy-load">

JavaScript for Image Swapping:

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('.lazy-load');

  lazyImages.forEach(img => {
    // Determine screen size
    const screenWidth = window.innerWidth;
    let highResSrc;

    // Select the high-resolution image based on screen size
    if (screenWidth < 600) { // Mobile
      highResSrc = img.getAttribute('data-src-mobile');
    } else if (screenWidth < 1200) { // Tablet
      highResSrc = img.getAttribute('data-src-tablet');
    } else { // Desktop
      highResSrc = img.getAttribute('data-src-desktop');
    }

    // Preload the high-resolution image
    const highResImage = new Image();
    highResImage.src = highResSrc;

    // Replace the low-res image with the high-res image after it's loaded
    highResImage.onload = function() {
      img.src = highResSrc;
    };
  });
});

Explanation:

Handling Screen Resize

To handle scenarios where users might resize their screens after loading, you can add a resize event listener:

function updateImage() {
  const lazyImages = document.querySelectorAll('.lazy-load');

  lazyImages.forEach(img => {
    const screenWidth = window.innerWidth;
    let highResSrc;

    if (screenWidth < 600) { // Mobile
      highResSrc = img.getAttribute('data-src-mobile');
    } else if (screenWidth < 1200) { // Tablet
      highResSrc = img.getAttribute('data-src-tablet');
    } else { // Desktop
      highResSrc = img.getAttribute('data-src-desktop');
    }

    // Preload the high-resolution image
    const highResImage = new Image();
    highResImage.src = highResSrc;

    // Replace the low-res image with the high-res image after it's loaded
    highResImage.onload = function() {
      img.src = highResSrc;
    };
  });
}

document.addEventListener("DOMContentLoaded", updateImage);
window.addEventListener("resize", updateImage);

This should provide a seamless experience for users across different devices and screen sizes.

More From Author