perf(images): WebP banners, text-only related cards, resized list thumbnails

Measured before/after with headless Chrome + CDP (not by eye):

- article banner: <picture> WebP q78 with the PNG as fallback, because the PNG
  must stay for og:image (social scrapers do not reliably render WebP cards).
  70 banners: 6.02 MB -> 2.52 MB (42%). JPEG measured *larger* than PNG here
  (q85 = 129%) — the art is flat terminal-style with sharp text edges.
- post page related cards: dropped four 1200x630 PNGs (183 KB) to display
  526x276 where the embedded code is illegible; now text-only cards with a
  category badge, date and reading time.
- list thumbnails (home + archive): new /og/thumb/<name>-{400,800}.webp served
  via srcset/sizes. Rows display at ~398px but were pulling full 1200x630 PNGs.
  Homepage thumbnails ~450 KB -> 62 KB; archive (71 rows) ~3.2 MB -> 436 KB.
- desktop banner capped at 720px centred: 67% -> 45% of a 900px viewport,
  keeping the art intact instead of cropping it.

Post page totals: images 277 KB -> 38 KB; page height 5758 -> 5065 (desktop)
and 9423 -> 8807 (mobile). Build: 163 pages.

Script: scripts/optimize-images.py; policy: docs/design-guide.md §3; runbook
step added to docs/ops-runbook.md.

src/components/PostList.astro

@@ -23,13 +23,32 @@ const updatedLabel = isZh ? '更新于' : 'Updated';
 const catHref = (cat: string) => `/${isZh ? 'zh/categories' : 'categories'}/${cat}/`;
 
 const og = (post: CollectionEntry<'posts'>) => post.data.ogImage || '/og-default.png';
+
+// The row thumbnail is displayed at ~398 CSS px wide, so the list used to pull a
+// 1200x630 PNG (~45 KB) per row for a 398px slot. Serve 400w/800w WebP derived from
+// the same art instead (5.8 KB / 16.1 KB — see scripts/optimize-images.py).
+const hasThumb = (post: CollectionEntry<'posts'>) => {
+  const p = og(post);
+  return p.startsWith('/og/') && p !== '/og-default.png';
+};
+const thumb = (post: CollectionEntry<'posts'>, w: 400 | 800) =>
+  og(post).replace('/og/', '/og/thumb/').replace(/\.png$/, `-${w}.webp`);
 ---
 
 <ul class="post-list">
   {shown.map((post) => (
     <li class="post-row">
       <a class="thumb" href={`/posts/${post.slug}/`} aria-hidden="true" tabindex="-1">
-        <img src={og(post)} alt="" loading="lazy" width="1200" height="630" />
+        <img
+          src={hasThumb(post) ? thumb(post, 800) : og(post)}
+          srcset={hasThumb(post) ? `${thumb(post, 400)} 400w, ${thumb(post, 800)} 800w` : undefined}
+          sizes="(max-width: 640px) 100vw, 398px"
+          alt=""
+          loading="lazy"
+          decoding="async"
+          width={hasThumb(post) ? 800 : 1200}
+          height={hasThumb(post) ? 420 : 630}
+        />
       </a>
       <div class="body">
         <a href={`/posts/${post.slug}/`}><h2>{post.data.title}</h2></a>

src/pages/posts/[...slug].astro

@@ -25,6 +25,8 @@ const minutes = Math.max(1, Math.round(words / 200));
 const fmt = (d: Date) =>
   d.toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US', { year: 'numeric', month: 'long', day: 'numeric' });
 
+const minutesOf = (body?: string) => Math.max(1, Math.round((body?.trim().split(/\s+/).length ?? 0) / 200));
+
 // Related posts: same language, same category or overlapping tags, excluding self
 const all = await getCollection('posts', ({ data }) => !data.draft);
 const related = all
@@ -101,7 +103,12 @@ const jsonLd = {
 
     {post.data.banner && (
       <figure class="article-banner">
-        <img src={post.data.banner} alt="" loading="lazy" width="1600" height="900" />
+        {/* WebP for the page (42% of the PNG bytes); the PNG stays for og:image
+            because social scrapers do not reliably render WebP share cards. */}
+        <picture>
+          <source srcset={post.data.banner.replace(/\.png$/, '.webp')} type="image/webp" />
+          <img src={post.data.banner} alt="" loading="lazy" decoding="async" width="1600" height="900" />
+        </picture>
       </figure>
     )}
 
@@ -116,10 +123,14 @@ const jsonLd = {
       <div class="related-grid">
         {related.map((p) => (
           <a class="related-card" href={`/posts/${p.slug}/`}>
-            <img class="related-thumb" src={p.data.ogImage || '/og-default.png'} alt="" loading="lazy" width="1200" height="630" />
+            {/* Text-only card on purpose: the OG art is illegible at this size
+                (displayed ~526x276) and cost ~46 KB per card. */}
             <div class="related-body">
+              <span class="related-badge">{p.data.category}</span>
               <h3>{p.data.title}</h3>
-              <time datetime={p.data.pubDate.toISOString()}>{fmt(p.data.pubDate)}</time>
+              <time datetime={p.data.pubDate.toISOString()}>
+                {fmt(p.data.pubDate)} · {minutesOf(p.body)} {lang === 'zh' ? '分钟' : 'min read'}
+              </time>
             </div>
           </a>
         ))}

src/styles/global.css

@@ -182,6 +182,13 @@ time { color: var(--faint); font-size: 0.88rem; }
   height: auto;
   display: block;
 }
+/* Desktop: the banner is a 16:9 figure. At full column width (1070px) it stands
+   602px tall — 67% of a 900px viewport, pushing the whole article below the fold.
+   Capping the width (rather than cropping) keeps the art intact: 720px -> ~405px,
+   which is 45% of the viewport. */
+@media (min-width: 900px) {
+  .article-banner { max-width: 720px; margin-left: auto; margin-right: auto; }
+}
 .article-head {
   margin-bottom: 2rem;
   padding-bottom: 1.5rem;
@@ -290,7 +297,8 @@ pre code {
   margin-top: 1rem;
 }
 .related-card {
-  display: block;
+  display: flex;
+  flex-direction: column;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -299,17 +307,27 @@ pre code {
   text-decoration: none;
 }
 .related-card:hover { border-color: var(--brand); }
-.related-thumb {
-  width: 100%;
-  height: auto;
-  display: block;
-  aspect-ratio: 1200 / 630;
-  object-fit: cover;
-  border-bottom: 1px solid var(--border);
+.related-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; }
+.related-badge {
+  align-self: flex-start;
+  display: inline-block;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--brand);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.1em 0.6em;
+  margin-bottom: 0.45rem;
 }
-.related-body { padding: 0.9rem 1rem; }
-.related-card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
-.related-card time { font-size: 0.78rem; }
+.related-card h3 {
+  margin: 0 0 0.3rem;
+  font-size: 0.95rem;
+  /* keep card heights comparable without thumbnails */
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.related-card time { font-size: 0.78rem; margin-top: auto; padding-top: 0.4rem; }
 
 /* ---------- Post list ---------- */
 .post-list { list-style: none; padding: 0; margin: 0; }