To Webp

Author: PrashantUnity

assets/css/tailwind-input.css

@@ -82,10 +82,6 @@
     @apply absolute inset-0 overflow-hidden transition-opacity duration-1000 ease-in-out;
   }
 
-  .home-hero__bg-layer picture {
-    @apply block h-full w-full;
-  }
-
   .home-hero__bg-img {
     @apply h-full w-full object-cover object-center;
   }

data/homepage.yaml

@@ -89,18 +89,15 @@ hero:
   searchPlaceholder: "Search tools, games, AI apps..."
   autoplayMs: 6000
   slides:
-    - image: "/images/hero/slide-1.jpg"
-      imageWebp: "/images/hero/slide-1.webp"
+    - image: "/images/hero/slide-1.webp"
       imageAlt: "Team collaborating on laptops"
       title: "Tools, games & AI in your browser"
       description: "This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more..."
-    - image: "/images/hero/slide-2.jpg"
-      imageWebp: "/images/hero/slide-2.webp"
+    - image: "/images/hero/slide-2.webp"
       imageAlt: "Developers working together at a desk"
       title: "Build faster with CodeFryDev"
       description: "From JSON playgrounds to design lab resources—everything runs in your browser."
-    - image: "/images/hero/slide-3.jpg"
-      imageWebp: "/images/hero/slide-3.webp"
+    - image: "/images/hero/slide-3.webp"
       imageAlt: "Laptop showing code on a desk"
       title: "No install. Just open and use."
       description: "Explore creative assets, productivity tools, games, and AI helpers in one place."

layouts/partials/home/hero.html

@@ -9,33 +9,27 @@
 <section id="hero" data-section-label="Home" class="home-hero relative text-center flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-[#edf2f8]" aria-roledescription="carousel" aria-label="Featured highlights">
   <div class="home-hero__bg" aria-hidden="true">
     <div id="bg-layer-1" class="home-hero__bg-layer opacity-100">
-      <picture>
-        <source type="image/webp" srcset="{{ $firstSlide.imageWebp }}">
-        <img
-          id="hero-bg-img-1"
-          src="{{ $firstSlide.image }}"
-          alt=""
-          width="1600"
-          height="840"
-          class="home-hero__bg-img"
-          fetchpriority="high"
-          decoding="async"
-        >
-      </picture>
+      <img
+        id="hero-bg-img-1"
+        src="{{ $firstSlide.image }}"
+        alt=""
+        width="1600"
+        height="840"
+        class="home-hero__bg-img"
+        fetchpriority="high"
+        decoding="async"
+      >
     </div>
     <div id="bg-layer-2" class="home-hero__bg-layer opacity-0">
-      <picture>
-        <source type="image/webp">
-        <img
-          id="hero-bg-img-2"
-          alt=""
-          width="1600"
-          height="840"
-          class="home-hero__bg-img"
-          loading="lazy"
-          decoding="async"
-        >
-      </picture>
+      <img
+        id="hero-bg-img-2"
+        alt=""
+        width="1600"
+        height="840"
+        class="home-hero__bg-img"
+        loading="lazy"
+        decoding="async"
+      >
     </div>
   </div>
   <div class="home-hero__overlay" aria-hidden="true"></div>

static/js/home-hero.js

@@ -27,24 +27,14 @@
   const autoplayMs = prefersReducedMotion ? 0 : Number(window.heroAutoplayMs) || 6000;
   const fadeMs = prefersReducedMotion ? 0 : 500;
 
-  function setLayerImage(layerEl, slide) {
-    if (!layerEl || !slide) return;
-    var picture = layerEl.querySelector('picture');
-    if (picture) {
-      var webp = picture.querySelector('source[type="image/webp"]');
-      var img = picture.querySelector('img');
-      if (webp && slide.imageWebp) webp.srcset = slide.imageWebp;
-      if (img && slide.image) img.src = slide.image;
-      return;
-    }
-    var imgOnly = layerEl.querySelector('img');
-    if (imgOnly && slide.image) {
-      imgOnly.src = slide.image;
+  function setLayerImage(layerEl, url) {
+    if (!layerEl || !url) return;
+    var img = layerEl.querySelector('img');
+    if (img) {
+      img.src = url;
       return;
     }
-    if (slide.image) {
-      layerEl.style.backgroundImage = "url('" + String(slide.image).replace(/'/g, "\\'") + "')";
-    }
+    layerEl.style.backgroundImage = "url('" + String(url).replace(/'/g, "\\'") + "')";
   }
 
   function syncLadybugBackup() {
@@ -55,11 +45,9 @@
   }
 
   heroSlides.forEach(function (slide) {
-    [slide.imageWebp, slide.image].forEach(function (url) {
-      if (!url) return;
-      var img = new Image();
-      img.src = url;
-    });
+    if (!slide.image) return;
+    var img = new Image();
+    img.src = slide.image;
   });
 
   heroSlides.forEach(function (slide, index) {
@@ -125,7 +113,7 @@
     const nextLayer = activeLayer === 1 ? bgLayer2 : bgLayer1;
     const currentLayerEl = activeLayer === 1 ? bgLayer1 : bgLayer2;
 
-    setLayerImage(nextLayer, slide);
+    setLayerImage(nextLayer, slide.image);
 
     if (fadeMs === 0) {
       applySlideContent(slide);