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

lazy-load

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

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>