Compress images

src/components/Hero.astro

@@ -1,23 +1,28 @@
 ---
 export interface Props {
-  title: string;
   date?: Date;
-  image: string;
+  imageData: ImageData;
   bold?: boolean;
 }
 
-const { title, date, image, bold = false } = Astro.props;
+import { Picture } from 'astro:assets'
+import type { ImageData } from './types';
+import { importImage } from './images';
+
+const { date, imageData, bold = false } = Astro.props;
+
+const optImage = importImage(imageData);
+
 const actualDate = date ? new Date(date) : undefined;
 const dateString = actualDate?.toISOString()?.slice(0, 10);
 ---
 
 <div class:list={[{ "page-hero": !bold, "index-hero": bold }]}>
   <div class="title-text text-center">
-    <h1 class:list={[{ "fw-bold": bold, "display-5": bold }]}>{title}</h1>
+    <h1 class:list={[{ "fw-bold": bold, "display-5": bold }]}>{imageData.title}</h1>
     {date && <div class="col-auto date align-self-end">{dateString}</div>}
   </div>
-
-  <img src={`/images/${image}`} />
+  <Picture src={optImage} alt={imageData.title} />
 </div>
 
 <style lang="scss">
@@ -44,6 +49,7 @@ const dateString = actualDate?.toISOString()?.slice(0, 10);
 
     img {
       width: 100%;
+      height: 100%;
       object-fit: cover;
     }
     .title-text {