perf: optimize hero image — 16MB PNG → 58KB WebP with responsive sources

public/favicon.svg

@@ -1,4 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" rx="16" fill="#3d5a3e"/>
-  <text x="50" y="68" font-family="Georgia, serif" font-size="52" font-weight="bold" fill="#faf8f5" text-anchor="middle">S</text>
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3d5a3e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2d4a2e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="18" fill="url(#bg)"/>
+  <text x="50" y="70" font-family="EB Garamond, Georgia, serif" font-size="56" font-weight="600" fill="#faf8f5" text-anchor="middle">S</text>
 </svg>

src/layouts/BaseLayout.astro

@@ -31,7 +31,8 @@ const currentPath = canonicalUrl || Astro.url.pathname;
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />

src/pages/index.astro

@@ -10,7 +10,11 @@ import PillarCard from '../components/PillarCard.astro';
   <!-- Hero Section -->
   <section class="hero">
     <div class="hero-bg">
-      <img src="/images/hero-speaker-new.png" alt="Scott Scoble speaking on stage" class="hero-image" />
+      <picture>
+        <source type="image/webp" srcset="/images/hero-speaker-new-800.webp 800w, /images/hero-speaker-new-1200.webp 1200w, /images/hero-speaker-new.webp 1920w" sizes="100vw" />
+        <source type="image/png" srcset="/images/hero-speaker-new-1920.png 1920w" sizes="100vw" />
+        <img src="/images/hero-speaker-new.webp" alt="Scott Scoble speaking on stage" class="hero-image" width="1920" height="1072" loading="eager" decoding="async" />
+      </picture>
       <div class="hero-overlay"></div>
     </div>
     <div class="hero-content">