Image sizes 2

src/components/cards/servantCard.astro

@@ -12,9 +12,10 @@ export interface Props {
   bondceImageFile: string
   ml: string
   bond10: boolean
+  index: number
 }
 
-const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
+const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name, index } = Astro.props
 const servantImagePath = `/src/assets/servant/${servantImageFile}`
 const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
 const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{png,webp}')
@@ -27,10 +28,12 @@ let bondce_css: string = 'bond-ce'
 if (bond10 === false) {
   bondce_css += ' unobtained'
 }
+
+let loading: "eager" | "lazy" = index <= 5 ? "eager" : "lazy";
 ---
 
 <article>
-  <Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} />
+  <Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} loading={loading}/>
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />