Compress images

src/components/Card.astro

@@ -1,18 +1,31 @@
 ---
 export interface Props {
-  title: string;
-  src: string;
+  imageData: ImageData,
+  optimize?: boolean
 }
 
-const { title, src } = Astro.props;
+import { Picture } from 'astro:assets'
+import type { ImageData } from './types';
+import { importImage } from './images';
+
+const { imageData } = Astro.props;
+
+const image = importImage(imageData);
 ---
 
 <div class="col">
   <div class="card">
     <div class="card-body">
-      <b class="card-title">{title}</b>
+      <b class="card-title">{imageData.title}</b>
     </div>
-    <img src={`/images/${src}`} alt={title} />
+    {typeof image === 'string' && <img src={image} alt={imageData.title} class="pic"/>}
+    {typeof image !== 'string' && 
+    <Picture 
+      src={image} 
+      alt={imageData.title}
+      class:list={'pic'} />
+    
+    }
   </div>
 </div>
 
@@ -20,4 +33,8 @@ const { title, src } = Astro.props;
   .card {
     margin-bottom: 20px;
   }
+  .pic {
+      height: 100%;
+      width: 100%;
+    }
 </style>