Compress images

src/components/FrontPageLink.astro

@@ -1,20 +1,26 @@
 ---
 export interface Props {
-  title: string;
   description: string;
-  imageSrc: string;
+  imageData: ImageData;
   href: string;
 }
+import { Picture } from "astro:assets";
+import type { ImageData } from './types';
+import { importImage } from "./images";
+const { href, imageData, description } = Astro.props;
 
-const { href, title, imageSrc, description } = Astro.props;
+const optImage = importImage(imageData);
 ---
 
 <div class="col">
   <a href={href} class="fp-link">
     <div class="card">
-      <img src={`/images/${imageSrc}`} class="card-img-top" />
+      <Picture 
+        src={optImage} 
+        alt={`in which ${description}`} 
+        class:list={['card-img-top', 'pic']}/>
       <div class="card-body">
-        <h5 class="card-title">{title}</h5>
+        <h5 class="card-title">{imageData.title}</h5>
         <p class="card-text">in which {description}</p>
       </div>
     </div>
@@ -58,5 +64,10 @@ const { href, title, imageSrc, description } = Astro.props;
     .card-text {
       font-size: medium;
     }
+
+    .pic {
+      height: 100%;
+      width: 100%;
+    }
   }
 </style>