feat: optimize image displays

src/lib/hero.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+  import type { ImageMetadata } from "$lib/image.svelte";
+  import Image from "$lib/image.svelte";
+
   export let name: string;
   export let description: string;
-  export let image: string;
+  export let image: ImageMetadata;
   export let mirrored: boolean = false;
 </script>
 
@@ -10,12 +13,12 @@
     mirrored && "md:flex-row-reverse"
   } m-8 my-12 items-center`}
 >
-  <img
-    srcset={image}
-    width="192"
-    height="192"
-    alt={`Grafik vom Charakter ${name}`}
-    class="w-48 rounded-full object-cover"
+  <Image
+    img={image}
+    alt={`Grafik des Charakters "${name}"`}
+    className="w-48 max-w-fit rounded-full object-cover"
+    width={168}
+    height={168}
     loading="lazy"
   />
 

src/lib/image.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" context="module">
+  export type ImageMetadata = {
+    format: "webp" | "png" | "avif";
+    src: string;
+  }[];
+
+  const mimeType: Record<string, string> = {
+    webp: "image/webp",
+    png: "image/png",
+    avif: "image/avif",
+  };
+</script>
+
+<script lang="ts">
+  export let className: string = "";
+  export let alt: string;
+  export let img: ImageMetadata;
+  export let width: number;
+  export let height: number;
+  export let loading: "lazy" | undefined = undefined;
+
+  const sources = img.map(({ format, src }) => ({
+    format: mimeType[format],
+    srcset: src,
+  }));
+  const pngSrc = sources.find(({ format }) => format === "image/png")?.srcset;
+</script>
+
+<picture class={className}>
+  {#each sources as { format, srcset }}
+    <source type={format} {srcset} />
+  {/each}
+  <img src={pngSrc} {width} {height} {alt} class={className} {loading} />
+</picture>