optimize images

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
-            className="h-[540px]"
-            client:visible
-            images={slider.map(({ image, imageAlt }) => ({ ...image, alt: imageAlt }))}
-          />
+          <Swiper className="h-[540px]" client:visible images={optimizedSlider} />
         </div>
       </Section>
     )