From ed1d484ccb48cec887d9fa5bdef2f1d4fac305cd Mon Sep 17 00:00:00 2001
From: rzen <rzenetl@gmail.com>
Date: Mon, 4 May 2026 20:58:18 -0400
Subject: [PATCH] site: home + grid tiles use <Image> instead of raw <img>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  |  9 +++++----
 src/pages/index.astro | 19 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/pages/grid.astro b/src/pages/grid.astro
index d8e90f0..5d0d396 100644
--- a/src/pages/grid.astro
+++ b/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}
-              width={tile.hero.src.width}
-              height={tile.hero.src.height}
+              src={tile.hero.src}
+              widths={[320, 480, 640]}
+              sizes="(max-width: 520px) 92vw, (max-width: 880px) 45vw, 320px"
               loading="lazy"
               decoding="async"
               alt={tile.name}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9b8acc0..8b2ab19 100644
--- a/src/pages/index.astro
+++ b/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}
-          width={hero.hero.src.width}
-          height={hero.hero.src.height}
-          fetchpriority="high"
+          src={hero.hero.src}
+          widths={[480, 720, 960, 1280]}
+          sizes="(max-width: 720px) 92vw, 720px"
           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}
-                  width={visual.src.width}
-                  height={visual.src.height}
+                  src={visual.src}
+                  widths={[320, 480, 640]}
+                  sizes="(max-width: 520px) 92vw, (max-width: 880px) 45vw, 320px"
                   loading="lazy"
                   decoding="async"
                   alt={tile.name}