Lib: Remove non-lazy image

We need the width/height anyways to determine the max size, so don't
bother with non-lazy stuff

src/lib/components/cards/Card.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { Image } from "$lib/components";
+  import { LazyImage } from "$lib/components";
+  import { error } from "@sveltejs/kit";
 
   interface CardProps {
     children: Snippet;
 
     /** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
-    imgsrc?: string | undefined;
+    imgsrc?: string;
+
+    /** The width of the image. Required if imgsrc is set */
+    imgwidth?: number;
+
+    /** The height of the image. Required if imgsrc is set */
+    imgheight?: number;
 
     /** The id of the header image element for JS access. */
-    imgid?: string | undefined;
+    imgid?: string;
 
     /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
     imghidden?: boolean;
@@ -21,23 +28,31 @@
   let {
     children,
     imgsrc = undefined,
+    imgwidth = undefined,
+    imgheight = undefined,
     imgid = undefined,
     imghidden = false,
     width = "w-auto",
     ...restProps
   }: CardProps = $props();
+
+  if (imgsrc && (!imgwidth || !imgheight)) {
+    error(400, "imgwidth and imgheight need to be specified when setting an imgsrc!");
+  }
 </script>
 
 <div class="card {width} overflow-hidden bg-white shadow">
   <!-- Allow empty strings for images that only appear after user action -->
   {#if imgsrc !== undefined}
-    <Image
+    <LazyImage
       id={imgid}
       src={imgsrc}
       alt="Card header"
       draggable="false"
       class="select-none shadow"
       hidden={imghidden}
+      imgwidth={imgwidth ?? 0}
+      imgheight={imgheight ?? 0}
     />
   {/if}