Cómo implementar Lazy Loading de imágenes

Las imágenes son parte importante de cualquier web, por ello es importante usar técnicas para usar imágenes sin afectar a la velocidad de carga. Por ello exploraremos cómo implementar Lazy Loading para imágenes utilizando HTML y JavaScript.

Lazy-loading

Lazy-loading es una técnica de optimización web que consiste en cargar inicialmente sólo las imágenes visibles y retrasar la carga de las otras imágenes hasta que el usuario las necesite. Esto ayuda a reducir el tiempo de carga al evitar cargar imágenes innecesarias.

En resumen: Lazy Loading implica cargar las imágenes solo cuando son visibles en la pantalla del usuario, en lugar de cargar todas las imágenes de una vez al cargar la página.

Lazy Load en Navegadores Modernos

Para los navegadores modernos está disponible el atributo loading el cual permite instruir al navegador como cargar las imágenes. Este atributo tiene dos posibles valores:

lazy: carga la imagen justo antes de mostrarse en la pantalla.
eager: carga la imagen inmediatamente, sin importar si es visible o no.

Esta técnica funciona correctamente en: Edge 79+, Chrome 77+, Safari 16.4+, Opera 64+ entre otros. Entonces para cargar las imágenes de forma diferida sólo es necesario agregar el nuevo atributo de la siguiente manera:


<img src="photo-01.jpg" loading="lazy" width="640" height="360">
<img src="photo-02.jpg" loading="lazy" width="640" height="360">
<img src="photo-03.jpg" loading="lazy" width="640" height="360">
<img src="photo-04.jpg" loading="lazy" width="640" height="360">

Demo: https://www.kodetop.com/demo/lazy-loading/lazy-loading-native.html

Lazy Load en Navegadores antiguos

Para los navegadores que no soporten el atributo loading se puede utilizar otra técnica que consiste en cargar una imagen de guía (de poco tamaño) y luego con JavaScript detectar si la imagen se encuentra en la parte visible y recién cargarla.

HTML

Al incluir la imagen en HTML utilizaremos el atributo data-src para incluir la imagen y en el atributo src colocaremos una imagen de guía.


<img src="placeholder.jpg" data-src="imagen-01.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-02.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-03.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-04.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-05.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-06.jpg" width="640" height="360">

Javascript

Ahora, utilizaremos Javascript para detectar todas las imágenes que tienen el atributo data-src y luego le asignamos el valor al atributo src solo cuando la imagen esté en el área visible de la ventana del navegador.


document.addEventListener("DOMContentLoaded", function() {
    const lazyLoad = function() {
        const lazyImages = document.querySelectorAll("img[data-src]");

        lazyImages.forEach(img => {
            console.log(img.src, img.dataset.src);
            if (img.getBoundingClientRect().top <= window.innerHeight
                && img.getBoundingClientRect().bottom >= 0
                && getComputedStyle(img).display !== 'none') {
                img.src = img.dataset.src;
                img.removeAttribute("data-src");
            }
        });
    };

    lazyLoad();

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
});

Demo: https://www.kodetop.com/demo/lazy-loading/lazy-loading-javascript.html

Recomendaciones

Especificar el tamaño de las imágenes, de esta manera el navegador reservará espacio en la pantalla y evitará el efecto de cambio de posición de los otros elementos al cargar la imágenes.
Utilizar carga diferida sólo para las imágenes que esta en la mitad inferior de la pantalla, esto evitará esperar que el usuario haga alguna interacción para mostrar las imágenes iniciales.