Image sizes 2

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.17",
+	"version": "0.2.0-pre.18",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/cards/favouriteCard.astro

@@ -25,7 +25,7 @@ const loadedImage = plsLoadImage(images, imagePath)
   aria-label=`${name} - new window`
 >
   <div class="heading">{name}</div>
-  <Image src={loadedImage} alt={name} loading={'eager'}/>
+  <Image src={loadedImage} alt={name} loading={'eager'} width={256} height={256} quality={100}/>
   <h2 class="subtext">
     {origin}
   </h2>

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 />

src/components/cards/technologyCard.astro

@@ -19,7 +19,7 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={loadedImage} alt={title} loading={'eager'} width={100} height={100} quality={100}/>
+    <Image src={loadedImage} alt="" loading={'eager'} width={150} height={150} quality={100}/>
     <div>
       <h2>{title}</h2>
     </div>

src/content/blog/instant-death.mdx

@@ -2,7 +2,7 @@
 layout: ../../layouts/blogPost.astro
 title: 'FGO Mechanics: Instant Death'
 pubDate: 2023-08-19
-description: 'Blog post talking about instant death in FGO, how you can take advantage of it and what its limits are.'
+description: 'Blog post talking about instant death in FGO and how you can take advantage.'
 author: 'Firq'
 tags: ['fgo', 'games']
 ---

src/layouts/customFooter.astro

@@ -75,7 +75,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
       rel="noopener noreferrer">AnthonyJ</a
     > for providing me with the custom Shishou favicon.
     <div class="sticky-image-wrapper">
-      <Image src={padoru} alt="Hashire sori yo ..." />
+      <Image src={padoru} alt="Hashire sori yo ..." width={64} height={64} quality={100}/>
     </div>
   </div>
   <br />

src/pages/servants.astro

@@ -20,7 +20,7 @@ const description =
 >
   <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
   <ServantSection title="Servants">
-    {servantdata.map((item) => <ServantCard {...item} />)}
+    {servantdata.map((item, index) => <ServantCard {...item} index={index} />)}
   </ServantSection>
   <div class="placeholder"></div>
   <ServantSection title="CEs">