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 React from 'react'
-import { Swiper as SwiperBase, type SwiperRef, SwiperSlide } from 'swiper/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>

src/pages/index.astro

@@ -13,14 +13,21 @@ import CoachCard from '@/components/CoachCard.astro'
 import ServiceCard from '@/components/ServiceCard.astro'
 import Marquee from '@/components/Marquee.astro'
 import { Reviews } from '@/components/Reviews.tsx'
-import { Image } from 'astro:assets'
 import Hero from '@/components/Hero.astro'
+import { getImage } from 'astro:assets'
 
 type Props = CollectionEntry<'pages'>['data']
 
 const { lang } = Astro.params
 const page = await getEntry('pages', 'main')
 const { slider, coaches, services, hero, marquee, reviews } = page?.data || {}
+const optimizedSlider = slider
+  ? await Promise.all(
+      slider.map((slide) =>
+        getImage({ src: slide.image, alt: slide.imageAlt, widths: [600, 800, 1200], quality: 90 })
+      )
+    )
+  : undefined
 const t = useTranslations(lang)
 ---
 
@@ -50,7 +57,7 @@ const t = useTranslations(lang)
   }
 
   {
-    slider && (
+    optimizedSlider && (
       <Section
         id="image-slider"
         title={t('slider.title')}
@@ -58,11 +65,7 @@ const t = useTranslations(lang)
         className="bg-bg-light"
       >
         <div class="-ml-4 flex w-[calc(100%+(1rem*2))] md:ml-0 md:w-full">
-          <Swiper
+          <Swiper className="h-[540px]" client:visible images={optimizedSlider} />
-            className="h-[540px]"
-            client:visible
-            images={slider.map(({ image, imageAlt }) => ({ ...image, alt: imageAlt }))}
-          />
         </div>
       </Section>
     )