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>

src/components/Cards.astro

@@ -1,8 +1,9 @@
 ---
 import Card from "./Card.astro";
+import type { ImageData } from "./types";
 
 export interface Props {
-  images: { title: string; src: string }[];
+  images: ImageData[];
 }
 
 const { images } = Astro.props;
@@ -10,6 +11,8 @@ const { images } = Astro.props;
 
 <div class="container">
   <div class="row row-cols-1 row-cols-md-2">
-    {images.map((i) => <Card title={i.title} src={i.src} />)}
+    {images.map((i) => 
+      <Card imageData={i}  />
+    )}
   </div>
 </div>

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>

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 {

src/components/Solocard.astro

@@ -1,9 +1,10 @@
 ---
 import Card from "./Card.astro";
+import type { ImageFileType } from "./types";
 
 export interface Props {
   title: string;
-  src: string;
+  src: {dir: string, name:string, fileType?: ImageFileType}
 }
 
 const { title, src } = Astro.props;
@@ -11,6 +12,13 @@ const { title, src } = Astro.props;
 
 <div class="container solocard-container">
   <div class="row">
-    <Card title={title} src={src} />
+    <Card imageData={{
+      title: title,
+      src: {
+        dir: src.dir,
+        name: src.name,
+        fileType: src.fileType
+      }
+    }} />
   </div>
 </div>

src/components/images.ts

@@ -0,0 +1,19 @@
+import type { ImageData } from "./types";
+
+export function importImage(d: ImageData) {
+  if (!(d.src.optimise ?? true)) {
+    return d.src.name;
+  }
+
+  switch (d.src.fileType) {
+    case "jpeg":
+      return import(`../images/${d.src.dir}/${d.src.name}.jpeg`);
+    case "png":
+      return import(`../images/${d.src.dir}/${d.src.name}.png`);
+    case "gif":
+      return import(`../images/${d.src.dir}/${d.src.name}.gif`);
+    case "jpg":
+    default:
+      return import(`../images/${d.src.dir}/${d.src.name}.jpg`);
+  }
+}

src/components/types.ts

@@ -0,0 +1,11 @@
+export type ImageData = {
+  title: string;
+  src: {
+    dir: string;
+    name: string;
+    fileType?: ImageFileType;
+    optimise?: boolean;
+  };
+};
+
+export type ImageFileType = "jpg" | "jpeg" | "png" | "gif";