optimize images

src/components/Reviews.tsx

@@ -41,7 +41,13 @@ export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
           <div className="flex h-full flex-col gap-6 bg-bg-light p-6 md:px-14 md:py-16">
             <div className="flex gap-1">
               {[...Array(5)].map((_, i) => (
-                <img key={i} {...StarIconSrc} alt="star" className="h-5 w-5 text-yellow-400" />
+                <img
+                  key={i}
+                  {...StarIconSrc}
+                  alt="star"
+                  loading="lazy"
+                  className="h-5 w-5 text-yellow-400"
+                />
               ))}
             </div>
             <blockquote className="break-words text-lg font-semibold text-text-light">

src/components/swiper/Swiper.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useRef } from 'react'
-import { Swiper as SwiperBase, type SwiperRef, SwiperSlide } from 'swiper/react'
+import React from 'react'
+import { Swiper as SwiperBase, SwiperSlide } from 'swiper/react'
 import { A11y, Navigation, Pagination } from 'swiper/modules'
 import { cn } from '@/libs/cn'
 import 'swiper/css'
@@ -7,9 +7,10 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import './styles.css'
 import { NextButton, PrevButton } from './NavButtons'
+import type { GetImageResult } from 'astro'
 
 type SwiperProps = {
-  images: (ImageMetadata & { alt: string })[]
+  images: GetImageResult[]
   className?: string
 }
 
@@ -26,8 +27,11 @@ export const Swiper: React.FC<SwiperProps> = ({ images, className }) => {
       {images.map((image, index) => (
         <SwiperSlide key={index}>
           <img
-            {...image}
+            {...image.attributes}
+            src={image.src}
+            srcSet={image.srcSet.attribute}
             loading="lazy"
+            decoding="async"
             className="absolute h-full w-full object-cover md:px-[calc(50px+2rem)]"
           />
         </SwiperSlide>