diff --git a/public/images/slides/slide1.png b/public/images/slides/slide1.png
deleted file mode 100644
index 392fdb8e..00000000
Binary files a/public/images/slides/slide1.png and /dev/null differ
diff --git a/public/images/slides/slide1.webp b/public/images/slides/slide1.webp
new file mode 100644
index 00000000..cbe875e1
Binary files /dev/null and b/public/images/slides/slide1.webp differ
diff --git a/public/images/slides/slide2.png b/public/images/slides/slide2.png
deleted file mode 100644
index a0b0d3d7..00000000
Binary files a/public/images/slides/slide2.png and /dev/null differ
diff --git a/public/images/slides/slide2.webp b/public/images/slides/slide2.webp
new file mode 100644
index 00000000..28e7a913
Binary files /dev/null and b/public/images/slides/slide2.webp differ
diff --git a/public/images/slides/slide3.png b/public/images/slides/slide3.png
deleted file mode 100644
index c1b29981..00000000
Binary files a/public/images/slides/slide3.png and /dev/null differ
diff --git a/public/images/slides/slide3.webp b/public/images/slides/slide3.webp
new file mode 100644
index 00000000..0e91f924
Binary files /dev/null and b/public/images/slides/slide3.webp differ
diff --git a/public/images/slides/slide4.png b/public/images/slides/slide4.png
deleted file mode 100644
index 655083c1..00000000
Binary files a/public/images/slides/slide4.png and /dev/null differ
diff --git a/public/images/slides/slide4.webp b/public/images/slides/slide4.webp
new file mode 100644
index 00000000..8343fd78
Binary files /dev/null and b/public/images/slides/slide4.webp differ
diff --git a/public/images/slides/slide5.png b/public/images/slides/slide5.png
deleted file mode 100644
index eb6a5734..00000000
Binary files a/public/images/slides/slide5.png and /dev/null differ
diff --git a/public/images/slides/slide5.webp b/public/images/slides/slide5.webp
new file mode 100644
index 00000000..c09445e0
Binary files /dev/null and b/public/images/slides/slide5.webp differ
diff --git a/public/images/slides/slide6.png b/public/images/slides/slide6.png
deleted file mode 100644
index c64a0f51..00000000
Binary files a/public/images/slides/slide6.png and /dev/null differ
diff --git a/public/images/slides/slide6.webp b/public/images/slides/slide6.webp
new file mode 100644
index 00000000..6aade255
Binary files /dev/null and b/public/images/slides/slide6.webp differ
diff --git a/public/images/slides/slide7.png b/public/images/slides/slide7.png
deleted file mode 100644
index 1e2ecd63..00000000
Binary files a/public/images/slides/slide7.png and /dev/null differ
diff --git a/public/images/slides/slide7.webp b/public/images/slides/slide7.webp
new file mode 100644
index 00000000..48ad1117
Binary files /dev/null and b/public/images/slides/slide7.webp differ
diff --git a/public/images/slides/slide8.png b/public/images/slides/slide8.png
deleted file mode 100644
index 73e29a42..00000000
Binary files a/public/images/slides/slide8.png and /dev/null differ
diff --git a/public/images/slides/slide8.webp b/public/images/slides/slide8.webp
new file mode 100644
index 00000000..872aedce
Binary files /dev/null and b/public/images/slides/slide8.webp differ
diff --git a/src/components/community-pages/carousel.tsx b/src/components/community-pages/carousel.tsx
index d19b83b9..3fc66d40 100644
--- a/src/components/community-pages/carousel.tsx
+++ b/src/components/community-pages/carousel.tsx
@@ -1,33 +1,37 @@
+import { useState, useMemo } from "react";
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
-
 import "swiper/css";
 
 const images = [
-  "/images/slides/slide1.png",
-  "/images/slides/slide2.png",
-  "/images/slides/slide3.png",
-  "/images/slides/slide4.png",
-  "/images/slides/slide5.png",
-  "/images/slides/slide6.png",
-  "/images/slides/slide7.png",
-  "/images/slides/slide8.png",
-  "/images/slides/slide1.png",
-  "/images/slides/slide2.png",
-  "/images/slides/slide3.png",
-  "/images/slides/slide4.png",
-  "/images/slides/slide5.png",
-  "/images/slides/slide6.png",
-  "/images/slides/slide7.png",
-  "/images/slides/slide8.png",
+  "/images/slides/slide1.webp",
+  "/images/slides/slide2.webp",
+  "/images/slides/slide3.webp",
+  "/images/slides/slide4.webp",
+  "/images/slides/slide5.webp",
+  "/images/slides/slide6.webp",
+  "/images/slides/slide7.webp",
+  "/images/slides/slide8.webp",
+  "/images/slides/slide1.webp",
+  "/images/slides/slide2.webp",
+  "/images/slides/slide3.webp",
+  "/images/slides/slide4.webp",
+  "/images/slides/slide5.webp",
+  "/images/slides/slide6.webp",
+  "/images/slides/slide7.webp",
+  "/images/slides/slide8.webp",
 ];
 
 const Carousel = () => {
+  const memoizedImages = useMemo(() => images, []);
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
   return (
-    <div className="swiper-linear relative  w-full overflow-hidden bg-background ">
-      {/* disabled gradient for future use */}
-      {/* <div className="absolute inset-0 z-[2] hidden bg-gradient-to-r  from-background from-0%  to-transparent to-5% md:block "></div>
-      <div className="absolute inset-0 z-[2] hidden bg-gradient-to-l  from-background from-0%  to-transparent to-5% md:block "></div> */}
+    <div
+      className="swiper-linear pointer-events-none relative w-full select-none overflow-hidden bg-background"
+      aria-label="Image Carousel"
+    >
       <Swiper
         modules={[Autoplay]}
         spaceBetween={5}
@@ -48,16 +52,30 @@ const Carousel = () => {
         className="w-full"
         watchSlidesProgress={true}
         preventInteractionOnTransition={true}
+        onInit={() => setIsLoaded(true)}
       >
-        {images.map((src, index) => (
-          <SwiperSlide key={index} className="!w-auto ">
-            <div className="mx-3  md:mx-5 lg:mx-[28px]">
+        {memoizedImages.map((src, index) => (
+          <SwiperSlide key={src} className="!w-auto">
+            <div className="mx-3 md:mx-5 lg:mx-[28px]">
               <img
                 src={src}
-                alt={`Image ${index + 1}`}
+                alt={`Carousel image ${index + 1}`}
                 height={380}
                 width={260}
-                className=" aspect-auto !max-h-[14rem] w-full md:h-full md:!max-h-[unset]  md:object-cover"
+                loading="lazy"
+                decoding="async"
+                className={`
+                  aspect-auto 
+                  !max-h-[14rem] 
+                  w-full 
+                  md:h-full 
+                  md:!max-h-[unset] 
+                  md:object-cover
+                  ${isLoaded ? "opacity-100" : "opacity-0"}
+                  transition-opacity 
+                  duration-300
+                `}
+                draggable="false"
               />
             </div>
           </SwiperSlide>
diff --git a/src/pages/community/akash-insiders.astro b/src/pages/community/akash-insiders.astro
index 83e376c2..faa6a882 100644
--- a/src/pages/community/akash-insiders.astro
+++ b/src/pages/community/akash-insiders.astro
@@ -23,7 +23,7 @@ import Layout from "@/layouts/layout.astro";
     />
     <div class="flex flex-col gap-20 lg:gap-40">
       <div>
-        <Carousel client:load />
+        <Carousel client:visible />
       </div>
       <div class="container-reader flex flex-col gap-20 lg:gap-40">
         <PointerSection