Как внедрять картинки и ускорять их.

lazy-load

Всё о важности картинок и их ускорении

Источник: https://codepen.io/fe-nix/pen/PoQvxQa

let observer = new IntersectionObserver(
  function (entries) {
    for (let i in entries) {
      let el = entries[i].target;
      if (entries[i].isIntersecting === true) {
        if (el.dataset.srcset) {
          el.setAttribute("srcset", el.dataset.srcset);
        } else {
          el.removeAttribute("srcset");
        }
        el.addEventListener(
          "load",
          function () {
            el.classList.add("loaded");
          },
          { passive: true }
        );
      }
    }
  },
  { threshold: [0], rootMargin: "100px 0px 100px 0px" } // Здесь вы выбираете на сколько пикселей вверх право низ и лево будут элементы будут считаться внутри вьюпорта и начинут загружаться в текущем примере 100 пикселей сверху и снизу.
);

document.addEventListener(
  "DOMContentLoaded",
  function () {
    let mas = document.querySelectorAll(".lazy"); // Слектор для изображений, здесь используется .lazy
    for (let i = 0; i < mas.length; i++) {
      observer.observe(mas[i]);
    }
  },
  { passive: true }
);

---

Пример вставки:

<img src="https://perfscan.ru/static/gallery/img/320/002.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="320" height="180" decoding="async" class="lazy">

<img src="https://perfscan.ru/static/gallery/img/320/003.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-srcset="https://perfscan.ru/static/gallery/img/640/003.jpg 2x" alt="" width="320" height="180" decoding="async" class="lazy">

LazyLoad для загрузки картинок при помощи CSS background

<style>
.wsBgLazy{background-image: none !important;}
</style>

<div class="wsbglazy" data-bgimgurl="image.jpg"></div>
<div class="wsbglazy" data-bgurl="image.jpg"></div>
<div class="wsbglazy"></div> <!-- картинка прописана где-то в CSS файлах стилей -->

<script>
    const wsBgObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                let wsEl = entry.target;
                if (wsEl.dataset.bgurl) {
                    wsEl.style.background = "url('"+wsEl.dataset.bgurl+"') 0 0 no-repeat";
                }
                else if(wsEl.dataset.bgimgurl) {
                    wsEl.style.backgroundImage = "url('"+wsEl.dataset.bgimgurl+"')";
                }
                wsEl.classList.remove("wsBgLazy");
                wsEl.classList.add("wsBgLoaded");
                wsBgObserver.unobserve(wsEl);
            }
        });
    });

    document.addEventListener(
        "DOMContentLoaded",
        function () {
            const wsBgMass = document.querySelectorAll(".wsBgLazy");
            wsBgMass.forEach((el) => {
                wsBgObserver.observe(el);
            });
        },
        { passive: true }
    );
</script>