diff --git a/package-lock.json b/package-lock.json
index 2acf6c9..c3ad0de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
         "vite": "^4.2.0",
-        "vite-imagetools": "^4.0.18"
+        "vite-imagetools": "^6.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1167,6 +1167,12 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "dev": true
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2021,6 +2027,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -2395,12 +2407,12 @@
       }
     },
     "node_modules/imagetools-core": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-3.3.1.tgz",
-      "integrity": "sha512-xllF2GDRg0SXCQQRxBAtE6N9dPAttc+ro+QDLnRmVSE5lH5clQxD2Al4XluirXj0T7lIH5VbetFmBLowW6ps+w==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-5.1.0.tgz",
+      "integrity": "sha512-NT7dh/1OoEwVp4vgMVRsW0vOMJsbaGtIyFJCXjGK9llT+GrCtQ5hJYPXNws7e2o7oYHU5mA9dDV1Cv9ooVL5Xw==",
       "dev": true,
       "dependencies": {
-        "sharp": "^0.31.3"
+        "sharp": "^0.32.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -2921,9 +2933,9 @@
       }
     },
     "node_modules/node-addon-api": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
-      "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
       "dev": true
     },
     "node_modules/node-fetch": {
@@ -3391,6 +3403,40 @@
         "node": ">=10"
       }
     },
+    "node_modules/prebuild-install/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3464,6 +3510,12 @@
         }
       ]
     },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "dev": true
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -3697,19 +3749,19 @@
       "dev": true
     },
     "node_modules/sharp": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.3.tgz",
-      "integrity": "sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==",
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
-        "node-addon-api": "^5.0.0",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
         "prebuild-install": "^7.1.1",
-        "semver": "^7.3.8",
+        "semver": "^7.5.4",
         "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
         "tunnel-agent": "^0.6.0"
       },
       "engines": {
@@ -3847,6 +3899,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.2.tgz",
+      "integrity": "sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==",
+      "dev": true,
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -4175,37 +4237,25 @@
       }
     },
     "node_modules/tar-fs": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
-      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+      "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
       "dev": true,
       "dependencies": {
-        "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",
         "pump": "^3.0.0",
-        "tar-stream": "^2.1.4"
+        "tar-stream": "^3.1.5"
       }
     },
-    "node_modules/tar-fs/node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "dev": true
-    },
     "node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+      "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
       "dev": true,
       "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=6"
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
       }
     },
     "node_modules/tar/node_modules/mkdirp": {
@@ -4470,13 +4520,13 @@
       }
     },
     "node_modules/vite-imagetools": {
-      "version": "4.0.19",
-      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-4.0.19.tgz",
-      "integrity": "sha512-vZaPsjLDgEqZrbj+ZsniRKthmoj4mvVrMOK/FZhRAbrVB4LOsil0BO2Gcq20e/JRlom4DzqtLw1UQUkfcqgCrA==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-6.2.1.tgz",
+      "integrity": "sha512-bKjxLcTJWJJ2iMxlQUAGgoslkwmfGBZ4vW3k87YWUIY4bC4QvU52ngLq10sy18fPBEWMXy/FHtPf9yR8KnHUFA==",
       "dev": true,
       "dependencies": {
-        "@rollup/pluginutils": "^5.0.0",
-        "imagetools-core": "^3.3.1"
+        "@rollup/pluginutils": "^5.0.2",
+        "imagetools-core": "^5.1.0"
       },
       "engines": {
         "node": ">=12.0.0"
diff --git a/package.json b/package.json
index 810b2cb..ad11a39 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.2.0",
-    "vite-imagetools": "^4.0.18"
+    "vite-imagetools": "^6.0.0"
   },
   "type": "module"
 }
diff --git a/src/lib/hero.svelte b/src/lib/hero.svelte
index 3dafcc1..4230b7e 100644
--- a/src/lib/hero.svelte
+++ b/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"
   />
 
diff --git a/src/lib/image.svelte b/src/lib/image.svelte
index e69de29..f3410db 100644
--- a/src/lib/image.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 140287f..9d19795 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 63e791f..0db6cc5 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/vite.config.ts b/vite.config.ts
index bba6baa..0b990ea 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,5 +3,13 @@ import { defineConfig } from "vite";
 import { imagetools } from "vite-imagetools";
 
 export default defineConfig({
-  plugins: [imagetools(), sveltekit()],
+  plugins: [
+    imagetools({
+      defaultDirectives: new URLSearchParams({
+        as: "metadata",
+        format: "avif;webp;png",
+      }),
+    }),
+    sveltekit(),
+  ],
 });