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}