Lazy Loading Images

Lazy loading is a technique used in web development to improve the performance and loading speed of web pages, particularly those with a large number of images or other media content. The basic idea behind lazy loading is to delay the loading of certain resources, such as images, until they are actually needed or about to come into the user's view.

Traditional web page loading involves fetching all resources, including images, as soon as the HTML document is requested by the browser. This can lead to slower loading times, especially on pages with a lot of images, because the browser has to download and render all the content before displaying anything to the user.

In contrast, lazy loading works by only loading images that are currently visible within the user's viewport or close to it. As the user scrolls down the page, additional images are loaded dynamically based on their current position on the screen. This approach has several benefits:

• Faster initial page load: By loading only the content that is immediately visible, the initial loading time is reduced, providing a faster and smoother user experience.
• Reduced bandwidth usage: Lazy loading minimizes the amount of data that needs to be transferred over the network, which can be particularly advantageous for users with limited or slow internet connections.
• Improved performance: Loading fewer resources upfront can lead to improved page responsiveness and lower memory usage, especially on devices with limited resources.
• Better user experience: Users can start engaging with the visible content more quickly, which enhances the overall browsing experience.

There are two main ways to lazy load images:

Browser-level lazy loading: This is supported by most modern browsers and uses the loading attribute on the img element. The value of this attribute can be set to lazy, which tells the browser to load the image only when it is visible on the screen. Here is an example:

<img src="https://example.com/image.jpg" alt="..." loading="lazy">

JavaScript lazy loading: This involves using JavaScript to load images only when they are needed. This can be more flexible than browser-level lazy loading, but it can also be more complex to implement. You need to use the Intersection Observer API to detect when the image is viewed by the user. Follow this instructions to add lazy loading using Javascript:

1. Include all your images using the img tag without the src attribute and including data-src, as follows:

<img data-src="https://example.com/image.jpg" alt="...">

2. Add following javascript code before the </body> tag

    const imgObserver = new IntersectionObserver(function(entries, observer){
      entries.forEach(entry => {
        if (entry.isIntersecting){
          entry.target.src = entry.target.dataset.src;
        }
      });
    });
 
    document.querySelectorAll('img[data-src]').forEach( el => {
      imgObserver.observe(el);
    });

Using both methods together: another option use to use javascript lazy loading when the browser does not support native lazy loading. Web developers can use Javascript to detect when the browser does not support lazy loading and provide a fallback function:

1. Include all your images using the img tag without the src attribute, with the loading attribute set to lazy and including data-src, as follows:

<img data-src="https://example.com/image.jpg" alt="..." loading="lazy">

2. Add following javascript code before the </body> tag

if ('loading' in HTMLImageElement.prototype) {
    document.querySelectorAll('img[data-src]').forEach( el => {
      el.src = el.dataset.src;
    });
  } else {
    const imgObserver = new IntersectionObserver(function(entries, observer){
      entries.forEach(entry => {
        if (entry.isIntersecting){
          entry.target.src = entry.target.dataset.src;
        }
      });
    });
 
    document.querySelectorAll('img[data-src]').forEach( el => {
      imgObserver.observe(el);
    });
  }

Lazy loading images is a useful technique that can improve the performance of a web page, reduce the initial page load time, reduce the amount of data that is transferred over the network and improve the overall responsiveness of the page.