diff --git a/src/layouts/PostSingle.astro b/src/layouts/PostSingle.astro
index 8a9c12f..5df4ccf 100755
--- a/src/layouts/PostSingle.astro
+++ b/src/layouts/PostSingle.astro
@@ -35,6 +35,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
                 width={1200}
                 alt={title}
                 class="w-full rounded"
+                format="webp"
               />
             </div>
           )
diff --git a/src/layouts/components/AuthorCard.astro b/src/layouts/components/AuthorCard.astro
index 7d16889..0a7ca21 100644
--- a/src/layouts/components/AuthorCard.astro
+++ b/src/layouts/components/AuthorCard.astro
@@ -18,6 +18,7 @@ const { title, image, social } = data.data;
         alt={title}
         width={120}
         height={120}
+        format="webp"
       />
     )
   }
diff --git a/src/layouts/components/BlogCard.astro b/src/layouts/components/BlogCard.astro
index 979b309..5067ce2 100644
--- a/src/layouts/components/BlogCard.astro
+++ b/src/layouts/components/BlogCard.astro
@@ -1,7 +1,7 @@
 ---
-import { Image } from "@astrojs/image/components";
 import config from "@/config/config.json";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
 
 const {
@@ -21,6 +21,7 @@ const { title, image, date, author, categories } = data.data;
         alt={title}
         width={445}
         height={230}
+        format="webp"
       />
     )
   }
diff --git a/src/layouts/components/Logo.astro b/src/layouts/components/Logo.astro
index 1f47c6b..ab23f50 100644
--- a/src/layouts/components/Logo.astro
+++ b/src/layouts/components/Logo.astro
@@ -1,6 +1,6 @@
 ---
-import { Image } from "@astrojs/image/components";
 import config from "@/config/config.json";
+import { Image } from "@astrojs/image/components";
 
 const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
   Astro.props;
@@ -39,6 +39,7 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
             height: logo_height.replace("px", "") + "px",
             width: logo_width.replace("px", "") + "px",
           }}
+          format="webp"
         />
         {theme_switcher && (
           <Image
@@ -53,6 +54,7 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
               height: logo_height.replace("px", "") + "px",
               width: logo_width.replace("px", "") + "px",
             }}
+            format="webp"
           />
         )}
       </>
diff --git a/src/layouts/partials/CallToAction.astro b/src/layouts/partials/CallToAction.astro
index cd4422e..386c2fd 100644
--- a/src/layouts/partials/CallToAction.astro
+++ b/src/layouts/partials/CallToAction.astro
@@ -1,6 +1,6 @@
 ---
-import { Image } from "@astrojs/image/components";
 import { markdownify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
 const { call_to_action } = Astro.props;
 ---
 
@@ -17,6 +17,7 @@ const { call_to_action } = Astro.props;
                 width={392}
                 height={390}
                 alt="cta-image"
+                format="webp"
               />
             </div>
             <div class="md:col-7 md:order-1">
diff --git a/src/layouts/partials/Testimonial.astro b/src/layouts/partials/Testimonial.astro
index e2b79b2..85c6b96 100644
--- a/src/layouts/partials/Testimonial.astro
+++ b/src/layouts/partials/Testimonial.astro
@@ -51,6 +51,7 @@ const { testimonial } = Astro.props;
                               class="rounded-full"
                               src={item.avatar}
                               alt={item.name}
+                              format="webp"
                             />
                           </div>
                           <div class="ml-4">
@@ -66,7 +67,7 @@ const { testimonial } = Astro.props;
                         </div>
                       </div>
                     </div>
-                  )
+                  ),
                 )}
               </div>
               <div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center" />
@@ -79,10 +80,10 @@ const { testimonial } = Astro.props;
 }
 
 <script>
-import { Swiper } from "swiper";
-import "swiper/css";
-import "swiper/css/pagination";
-import { Autoplay, Pagination } from "swiper/modules";
+  import { Swiper } from "swiper";
+  import "swiper/css";
+  import "swiper/css/pagination";
+  import { Autoplay, Pagination } from "swiper/modules";
 
   new Swiper(".testimonial-slider", {
     modules: [Pagination, Autoplay],
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 0fc91a9..809d492 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,7 +1,7 @@
 ---
-import { Image } from "@astrojs/image/components";
 import Base from "@/layouts/Base.astro";
 import { markdownify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
 import { getEntryBySlug } from "astro:content";
 
 const entry = await getEntryBySlug("pages", "about");
@@ -27,6 +27,7 @@ const { title, description, meta_title, image } = entry.data;
                 width={200}
                 height={200}
                 alt={title}
+                format="webp"
               />
             )
           }
diff --git a/src/pages/authors/[single].astro b/src/pages/authors/[single].astro
index e27401a..75bb1e3 100755
--- a/src/pages/authors/[single].astro
+++ b/src/pages/authors/[single].astro
@@ -25,7 +25,7 @@ const { title, social, meta_title, description, image } = author.data;
 const { Content } = await author.render();
 const posts = await getSinglePage(blog_folder);
 const postFilterByAuthor = posts.filter(
-  (post) => slugify(post.data.author) === slugify(title)
+  (post) => slugify(post.data.author) === slugify(title),
 );
 ---
 
@@ -49,6 +49,7 @@ const postFilterByAuthor = posts.filter(
                 height={200}
                 width={200}
                 alt={title}
+                format="webp"
               />
             )
           }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 31b49f7..4d5b4c6 100755
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,6 +48,7 @@ const { banner, features }: Homepage = homepage.data;
                 height={380}
                 width={1200}
                 alt="banner image"
+                format="webp"
               />
             </div>
           )
@@ -73,6 +74,7 @@ const { banner, features }: Homepage = homepage.data;
                 fit="contain"
                 background="rgba(0,0,0,0)"
                 alt={feature.title}
+                format="webp"
               />
             </div>
             <div class={`md:col-7 lg:col-6 ${index % 2 !== 0 && "md:order-1"}`}>