images optimizations

src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import MobileNavigation from '@/components/header/MobileNavigation'
 import { useTranslations } from '@/i18n/utils'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import Section from '@/components/Section.astro'
@@ -12,9 +11,11 @@ import { getEntry } from 'astro:content'
 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 { Reviews, type OptimizedReview } from '@/components/Reviews.tsx'
 import Hero from '@/components/Hero.astro'
 import { getImage } from 'astro:assets'
+import { TW_SCREENS, TW_WIDTHS } from '@/constants/images'
+import { imageResultToImageAttributes } from '@/libs/image'
 
 type Props = CollectionEntry<'pages'>['data']
 
@@ -27,13 +28,35 @@ const optimizedSlider = slider
         getImage({
           src: slide.image,
           alt: slide.imageAlt,
-          widths: [600, 1200],
-          quality: 90,
+          widths: [TW_SCREENS.SM, TW_SCREENS.LG],
+          sizes: `(max-width: ${TW_WIDTHS.LG}px) ${TW_SCREENS.SM}px, ${TW_SCREENS.LG}px`,
+          quality: 80,
           format: 'webp',
-        })
+          loading: 'eager',
+        }).then(imageResultToImageAttributes)
       )
     )
   : undefined
+
+const optimizedReviews = reviews
+  ? await Promise.all(
+      reviews.map(async (review): Promise<OptimizedReview> => {
+        if (!review.author?.image)
+          return { ...review, author: { ...review.author, image: undefined } }
+
+        const optimizedImage = await getImage({
+          src: review.author?.image,
+          alt: review.author?.imageAlt,
+          width: 64,
+          height: 64,
+          format: 'webp',
+          loading: 'lazy',
+        }).then(imageResultToImageAttributes)
+
+        return { ...review, author: { ...review.author, image: optimizedImage } }
+      })
+    )
+  : undefined
 const t = useTranslations(lang)
 ---
 
@@ -53,7 +76,7 @@ const t = useTranslations(lang)
   {
     coaches && (
       <Section id="coaches" title={t('coaches.title')} description={t('coaches.subtitle')}>
-        <div class="grid place-items-center gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
+        <div class="grid place-items-center gap-4 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
           {coaches.map((coach) => (
             <CoachCard {...coach} lang={lang} />
           ))}
@@ -90,10 +113,10 @@ const t = useTranslations(lang)
   }
 
   {
-    reviews && (
+    optimizedReviews && (
       <Section id="reviews" title={t('reviews.title')}>
         <div class="-mx-4 flex w-[calc(100%+2rem)] md:-mx-16 md:w-[calc(100%+8rem)] lg:-mx-24 lg:w-[calc(100%+12rem)]">
-          <Reviews client:visible reviews={reviews} lang={lang} />
+          <Reviews client:visible reviews={optimizedReviews} lang={lang} />
         </div>
       </Section>
     )