feat: optimize images

src/app.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply bg-cocoa-brown-700 text-yellow-400 text-center;
+    @apply bg-cocoa-brown text-yellow-400 text-center;
   }
 }
 

src/lib/hero.svelte

@@ -11,9 +11,12 @@
   } m-8 my-12 items-center`}
 >
   <img
-    src={image}
+    srcset={image}
+    width="192"
+    height="192"
     alt={`Grafik vom Charakter ${name}`}
-    class="w-48 rounded-full"
+    class="w-48 rounded-full object-cover"
+    loading="lazy"
   />
 
   <div class="p-4 md:text-left {!mirrored && 'md:text-right'}">

src/lib/images/beyron.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47e656a5651c6a7c966c4a312bf44160896175959441e5b0edec654ea769426f
+size 1329544

src/lib/images/blue.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44a3a96db70fa34543cebf4a2a29df06003750c96dd46ef42bf5d8b482a0276e
+size 1426922

src/lib/images/logo.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2c833dc84b4ab06d9de2feeb3ff0d1598c536801341eacdf24706b659ed8f1de
+size 984734

src/lib/images/tam.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f9b070f0b0f07d7bd72fbab23bbf764987adc8033cc0d002e674a52fb21b8bd
+size 844117

src/routes/+layout.svelte

@@ -1,21 +1,23 @@
 <script>
   import "../app.css";
+
+  import LogoImg from "$lib/images/logo.png?width=256&format=webp;png&srcset";
 </script>
 
 <header class="flex justify-center">
   <a href="/">
     <img
-      height="300"
-      width="300"
+      height="256"
+      width="256"
       alt="Logo, Illustration von einem Pfeil über einem Herz"
-      src="logo.png"
+      srcset={LogoImg}
     />
   </a>
 </header>
 
 <div class="flex items-center justify-center">
   <div class="max-w-screen-md">
-    <p class="font-vinque text-6xl mt-12">
+    <p class="font-vinque text-6xl mt-8">
       Ein <span class="text-[4rem] relative bottom-2">P</span>feil am rechten
       <span class="text-red-500"
         ><span class="text-[4rem] relative bottom-2">F</span>leck</span

src/routes/+layout.ts

@@ -1 +1,2 @@
-export const prerender = true
+export const prerender = true;
+export const csr = false;

src/routes/+page.svelte

@@ -4,8 +4,17 @@
   import H2 from "$lib/h2.svelte";
   import H3 from "$lib/h3.svelte";
   import MajorActor from "$lib/major-actor.svelte";
+
+  import BeyronImg from "$lib/images/beyron.png?width=192&format=webp;png&srcset";
+  import TamImg from "$lib/images/tam.png?width=192&format=webp;png&srcset";
+  import BlueImg from "$lib/images/blue.png?width=192&format=webp;png&srcset";
 </script>
 
+<svelte:head>
+  <title>Ein Pfeil am rechten Fleck</title>
+  <meta name="description" content="TODO" />
+</svelte:head>
+
 <p />
 
 <H2>Unsere Helden</H2>
@@ -14,18 +23,18 @@
   <Hero
     name="Beyron Ladisla"
     description="Seit 22 Jahren Unteroffizier der Königsgarde und keine Ambitionen aufzusteigen. Beyron fühlt sich eher zum Alkohol hingezogen als zu seinem Beruf."
-    image="/beyron.png"
+    image={BeyronImg}
   />
   <Hero
     name="Tam"
     description="Nur wenigen ist Tamriel, genannt Tam, überhaupt bekannt. Fängt sie jedoch an zu sprechen offenbart sich ein kluger Kopf. Als beste Freundin und stete Begleiterin von Beyron ist sie oftmals das gute Gewissen dieser Zweierbeziehung."
-    image="/tam.png"
+    image={TamImg}
     mirrored
   />
   <Hero
     name="Blue"
     description="Ein langweiliges Leben führen wie ihre reichen Eltern? Nichts für Blue. Die weite Welt ist ein viel besserer Ort um erwachsen zu werden als ein staubiger Klassenraum."
-    image="/blue.png"
+    image={BlueImg}
   />
 </p>