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>

src/routes/+layout.svelte

@@ -1,16 +1,17 @@
 <script>
   import "../app.css";
+  import Image from "$lib/image.svelte";
 
-  import LogoImg from "$lib/images/logo.png?w=512&format=webp;png&srcset";
+  import LogoImg from "$lib/images/logo.png?w=512";
 </script>
 
 <header class="flex justify-center">
   <a href="/">
-    <img
-      height="256"
-      width="256"
+    <Image
+      height={256}
+      width={256}
       alt="Logo, Illustration von einem Pfeil über einem Herz"
-      srcset={LogoImg}
+      img={LogoImg}
     />
   </a>
 </header>

src/routes/+page.svelte

@@ -5,9 +5,9 @@
   import H3 from "$lib/h3.svelte";
   import MajorActor from "$lib/major-actor.svelte";
 
-  import BeyronImg from "$lib/images/beyron.png?width=384&format=webp;png&srcset";
-  import TamImg from "$lib/images/tam.png?width=384&format=webp;png&srcset";
-  import BlueImg from "$lib/images/blue.png?width=384&format=webp;png&srcset";
+  import BeyronImg from "$lib/images/beyron.png?w=336";
+  import TamImg from "$lib/images/tam.png?w=336";
+  import BlueImg from "$lib/images/blue.png?w=336";
 </script>
 
 <svelte:head>