site: home + grid tiles use <Image> instead of raw <img>

Eliminates the byte-dedup hazard that just bit timelined and apex: every
image consumer now goes through Astro's image pipeline, so duplicate
bytes share their webp variants instead of one consumer's strategy
silently winning and dropping the original asset.

Side-benefit is significant: tiles and the home hero now ship responsive
webp variants via srcset/sizes instead of the original PNG/JPG. The
superkey hero alone drops from 192 KB to ~29 KB at the largest size.

Video branches stay raw — astro:assets is image-only and videos don't
have this bug.

src/pages/grid.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Masonry from '../components/Masonry.astro';
 import { heroes } from '../lib/hero';
@@ -30,11 +31,11 @@ const lastUpdated = reviews[0]?.data.date;
       <article>
         <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}>
           {tile.hero?.kind === 'image' && (
-            <img
+            <Image
               class="media"
-              src={tile.hero.src.src}
+              src={tile.hero.src}
-              width={tile.hero.src.width}
+              widths={[320, 480, 640]}
-              height={tile.hero.src.height}
+              sizes="(max-width: 520px) 92vw, (max-width: 880px) 45vw, 320px"
               loading="lazy"
               decoding="async"
               alt={tile.name}

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Masonry from '../components/Masonry.astro';
 import { heroes } from '../lib/hero';
@@ -91,14 +92,14 @@ const itemList = buildItemList(
   {hero && hero.kind === 'review' && (
     <a href={hero.href} class="hero">
       {hero.hero?.kind === 'image' && (
-        <img
+        <Image
           class="hero-media"
-          src={hero.hero.src.src}
+          src={hero.hero.src}
-          width={hero.hero.src.width}
+          widths={[480, 720, 960, 1280]}
-          height={hero.hero.src.height}
+          sizes="(max-width: 720px) 92vw, 720px"
-          fetchpriority="high"
           loading="eager"
           decoding="sync"
+          fetchpriority="high"
           alt={hero.name}
         />
       )}
@@ -131,11 +132,11 @@ const itemList = buildItemList(
           <article>
             <a href={tile.href} class:list={['tile', { 'text-only': !visual, 'is-list': tile.kind === 'list' }]}>
               {visual?.kind === 'image' && (
-                <img
+                <Image
                   class="media"
-                  src={visual.src.src}
+                  src={visual.src}
-                  width={visual.src.width}
+                  widths={[320, 480, 640]}
-                  height={visual.src.height}
+                  sizes="(max-width: 520px) 92vw, (max-width: 880px) 45vw, 320px"
                   loading="lazy"
                   decoding="async"
                   alt={tile.name}