From 8e3aa324b57dd645980b203d5f8a5b9f9dc53a84 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Fri, 4 Sep 2026 07:13:22 -0700
Subject: [PATCH] perf(marketing): serve images at their display size (#9682)

---
 apps/marketing/package.json                   |   3 +-
 .../{public => src/assets}/app-desktop.webp   | Bin
 .../{public => src/assets}/icon.webp          | Bin
 apps/marketing/src/layouts/Layout.astro       |  14 +++++++-
 apps/marketing/src/pages/index.astro          |  34 +++++++++++++-----
 pnpm-lock.yaml                                |   7 ++--
 6 files changed, 45 insertions(+), 13 deletions(-)
 rename apps/marketing/{public => src/assets}/app-desktop.webp (100%)
 rename apps/marketing/{public => src/assets}/icon.webp (100%)

diff --git a/apps/marketing/package.json b/apps/marketing/package.json
index 912faf88164df814c0a9fb85e7c95306741b822d..78c121d14fe240bd69431ad881b7f528739c93d5 100644
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@t3tools/shared": "workspace:*",
-    "astro": "^7.0.3"
+    "astro": "^7.0.3",
+    "sharp": "0.34.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.7",
diff --git a/apps/marketing/public/app-desktop.webp b/apps/marketing/src/assets/app-desktop.webp
similarity index 100%
rename from apps/marketing/public/app-desktop.webp
rename to apps/marketing/src/assets/app-desktop.webp
diff --git a/apps/marketing/public/icon.webp b/apps/marketing/src/assets/icon.webp
similarity index 100%
rename from apps/marketing/public/icon.webp
rename to apps/marketing/src/assets/icon.webp
diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro
index 686b555fd4c0a368cb81fcecd4e0047e4438f607..0b022821a4546a3bee2fbdff6099341699013d5a 100644
--- a/apps/marketing/src/layouts/Layout.astro
+++ b/apps/marketing/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+import appIcon from "../assets/icon.webp";
 import {
   ANDROID_PLAY_STORE_URL,
   GITHUB_REPOSITORY_URL,
@@ -67,7 +69,17 @@ const {
       <footer class="footer">
         <div class="footer-inner">
           <div class="footer-brand">
-            <img src="/icon.webp" alt="" />
+            <Image
+              src={appIcon}
+              alt=""
+              width={20}
+              height={20}
+              densities={[1, 2, 3]}
+              format="webp"
+              quality={90}
+              loading="lazy"
+              decoding="async"
+            />
             <span>&copy; {new Date().getFullYear()} T3 Tools Inc · MIT licensed</span>
           </div>
           <div class="footer-links">
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 6b45f1a1bbc379d285c08169462d329fdad0058f..1b47bf1512ba823efdc68d3ece55e177251491c1 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -1,4 +1,6 @@
 ---
+import { getImage } from "astro:assets";
+import desktopScreenshot from "../assets/app-desktop.webp";
 import Layout from "../layouts/Layout.astro";
 import {
   ANDROID_PLAY_STORE_URL,
@@ -8,6 +10,13 @@ import {
 } from "../lib/site";
 import { tweets } from "../lib/tweets";
 
+const screenshot = await getImage({
+  src: desktopScreenshot,
+  widths: [864, 1180, 1728, 2360],
+  format: "webp",
+  quality: 90,
+});
+
 const desktopEndorsementRows = [
   tweets.filter((_, index) => index % 2 === 0),
   tweets.filter((_, index) => index % 2 === 1),
@@ -80,14 +89,23 @@ const mobileEndorsementRows = [
       <div data-rise style="--d:520ms">
         <div class="hero-preview">
           <figure class="hero-screenshot-frame">
-            <img
-              src="/app-desktop.webp"
-              alt="T3 Code with a settled thread beside its pull request diff"
-              width="2880"
-              height="1800"
-              loading="eager"
-              decoding="async"
-            />
+            <picture>
+              <!-- Match the hidden mobile layout without requesting a screenshot. -->
+              <source
+                media="(max-width: 820px)"
+                srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+              />
+              <img
+                src={desktopScreenshot.src}
+                srcset={`${screenshot.srcSet.attribute}, ${desktopScreenshot.src} ${desktopScreenshot.width}w`}
+                sizes="(max-width: 960px) min(864px, calc(100vw - 20px)), min(1180px, calc(100vw - 60px))"
+                alt="T3 Code with a settled thread beside its pull request diff"
+                width={desktopScreenshot.width}
+                height={desktopScreenshot.height}
+                loading="eager"
+                decoding="async"
+              />
+            </picture>
           </figure>
         </div>
       </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d5ee2875ccdd6fb69a18466c3239a8868aef5ce..d740a25572a234159f2823f578c3232dce8484f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -206,6 +206,9 @@ importers:
       astro:
         specifier: ^7.0.3
         version: 7.0.3(@astrojs/markdown-remark@7.2.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.12.4)(aws4fetch@1.0.20)(idb-keyval@6.2.1)(ioredis@5.11.0)(jiti@2.7.0)(rollup@4.61.0)(terser@5.48.0)(typescript@6.0.3)(unrun@0.2.39)(yaml@2.9.0)
+      sharp:
+        specifier: 0.34.5
+        version: 0.34.5
     devDependencies:
       '@astrojs/check':
         specifier: ^0.9.7
@@ -12787,8 +12790,7 @@ snapshots:
 
   '@iarna/toml@2.2.5': {}
 
-  '@img/colour@1.1.0':
-    optional: true
+  '@img/colour@1.1.0': {}
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -20293,7 +20295,6 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
-    optional: true
 
   shebang-command@2.0.0:
     dependencies:
-- 
2.54.0