const webps = document.querySelectorAll(".webp");

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
    if (entry.isIntersecting) {
    const img = entry.target;
    const currentSrc = img.src;
    img.src = "";           // clear to force reload
    img.src = currentSrc;   // reassign original src to reload
    }
});
}, {
threshold: 0.5 // trigger when at least 50% of the webp is visible
});

webps.forEach((webp) => observer.observe(webp));