authorgravatar for me@t3.ggTheo Browne <me@t3.gg> 2026-09-04 07:13:22-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-04 07:13:22-07:00
log8e3aa324b57dd645980b203d5f8a5b9f9dc53a84
tree4d554b6f266679a37fecded80aff958980e110bc
parent7cf5b284e6e37895f535433c77f728b3e4292c9b
signature Signed by PGP key B5690EEEBB952194

perf(marketing): serve images at their display size (#9682)

8 files changed, 45 insertions(+), 13 deletions(-)

apps/marketing/package.json+2-1
......@@ -11,7 +11,8 @@
1111 },
1212 "dependencies": {
1313 "@t3tools/shared": "workspace:*",
14 "astro": "^7.0.3"
14 "astro": "^7.0.3",
15 "sharp": "0.34.5"
1516 },
1617 "devDependencies": {
1718 "@astrojs/check": "^0.9.7",
apps/marketing/public/app-desktop.webp deleted
Binary files a/apps/marketing/public/app-desktop.webp and /dev/null differ
apps/marketing/public/icon.webp deleted
Binary files a/apps/marketing/public/icon.webp and /dev/null differ
apps/marketing/src/assets/app-desktop.webp created
Binary files /dev/null and b/apps/marketing/src/assets/app-desktop.webp differ
apps/marketing/src/assets/icon.webp created
Binary files /dev/null and b/apps/marketing/src/assets/icon.webp differ
apps/marketing/src/layouts/Layout.astro+13-1
......@@ -1,4 +1,6 @@
11---
2import { Image } from "astro:assets";
3import appIcon from "../assets/icon.webp";
24import {
35 ANDROID_PLAY_STORE_URL,
46 GITHUB_REPOSITORY_URL,
......@@ -67,7 +69,17 @@ const {
6769 <footer class="footer">
6870 <div class="footer-inner">
6971 <div class="footer-brand">
70 <img src="/icon.webp" alt="" />
72 <Image
73 src={appIcon}
74 alt=""
75 width={20}
76 height={20}
77 densities={[1, 2, 3]}
78 format="webp"
79 quality={90}
80 loading="lazy"
81 decoding="async"
82 />
7183 <span>&copy; {new Date().getFullYear()} T3 Tools Inc · MIT licensed</span>
7284 </div>
7385 <div class="footer-links">
apps/marketing/src/pages/index.astro+26-8
......@@ -1,4 +1,6 @@
11---
2import { getImage } from "astro:assets";
3import desktopScreenshot from "../assets/app-desktop.webp";
24import Layout from "../layouts/Layout.astro";
35import {
46 ANDROID_PLAY_STORE_URL,
......@@ -8,6 +10,13 @@ import {
810} from "../lib/site";
911import { tweets } from "../lib/tweets";
1012
13const screenshot = await getImage({
14 src: desktopScreenshot,
15 widths: [864, 1180, 1728, 2360],
16 format: "webp",
17 quality: 90,
18});
19
1120const desktopEndorsementRows = [
1221 tweets.filter((_, index) => index % 2 === 0),
1322 tweets.filter((_, index) => index % 2 === 1),
......@@ -80,14 +89,23 @@ const mobileEndorsementRows = [
8089 <div data-rise style="--d:520ms">
8190 <div class="hero-preview">
8291 <figure class="hero-screenshot-frame">
83 <img
84 src="/app-desktop.webp"
85 alt="T3 Code with a settled thread beside its pull request diff"
86 width="2880"
87 height="1800"
88 loading="eager"
89 decoding="async"
90 />
92 <picture>
93 <!-- Match the hidden mobile layout without requesting a screenshot. -->
94 <source
95 media="(max-width: 820px)"
96 srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
97 />
98 <img
99 src={desktopScreenshot.src}
100 srcset={`${screenshot.srcSet.attribute}, ${desktopScreenshot.src} ${desktopScreenshot.width}w`}
101 sizes="(max-width: 960px) min(864px, calc(100vw - 20px)), min(1180px, calc(100vw - 60px))"
102 alt="T3 Code with a settled thread beside its pull request diff"
103 width={desktopScreenshot.width}
104 height={desktopScreenshot.height}
105 loading="eager"
106 decoding="async"
107 />
108 </picture>
91109 </figure>
92110 </div>
93111 </div>
pnpm-lock.yaml+4-3
......@@ -206,6 +206,9 @@ importers:
206206 astro:
207207 specifier: ^7.0.3
208208 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)
209 sharp:
210 specifier: 0.34.5
211 version: 0.34.5
209212 devDependencies:
210213 '@astrojs/check':
211214 specifier: ^0.9.7
......@@ -12787,8 +12790,7 @@ snapshots:
1278712790
1278812791 '@iarna/toml@2.2.5': {}
1278912792
12790 '@img/colour@1.1.0':
12791 optional: true
12793 '@img/colour@1.1.0': {}
1279212794
1279312795 '@img/sharp-darwin-arm64@0.34.5':
1279412796 optionalDependencies:
......@@ -20293,7 +20295,6 @@ snapshots:
2029320295 '@img/sharp-win32-arm64': 0.34.5
2029420296 '@img/sharp-win32-ia32': 0.34.5
2029520297 '@img/sharp-win32-x64': 0.34.5
20296 optional: true
2029720298
2029820299 shebang-command@2.0.0:
2029920300 dependencies: