How can WEBP image files enhance the visual appeal of a design?

document.addEventListener("DOMContentLoaded", function () {
  const lazyloadElements = document.querySelectorAll(".lazyload");


  lazyloadElements.forEach((el) => {
    const highResImage = el.getAttribute("data-bg");


    if (highResImage) {
      // Preload the high-quality image
      const img = new Image();
      img.src = highResImage;
      console.log("start preload: ", highResImage);


      img.onload = function () {
        console.log("finished preload: ", highResImage);


        // Set the high-quality image to the ::before pseudo-element
        el.style.setProperty("--bg-image-high-res", `url('${highResImage}')`);


        // Add a class to trigger the fade-in effect
        el.classList.add("loaded");
      };
    }
  });
});