update images

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>
           )

src/layouts/components/AuthorCard.astro

@@ -18,6 +18,7 @@ const { title, image, social } = data.data;
         alt={title}
         width={120}
         height={120}
+        format="webp"
       />
     )
   }

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"
       />
     )
   }

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"
           />
         )}
       </>

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">

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],