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.

docs/ops-runbook.md

@@ -21,6 +21,11 @@ Markdown (src/content/posts) → Astro build (dist/) → Gitea Actions → act_r
 1. Create `src/content/posts/<slug>.md` with frontmatter (see `content-guide.md` §6).
 2. Push to `main`.
 3. CI builds `dist/` and deploys to the nginx container automatically.
+   - **Before pushing a post that adds art**, generate its in-page derivatives:
+     `uv run --with pillow python scripts/optimize-images.py <slug>`
+     (banner `.webp` + `/og/thumb/<name>-{400,800}.webp`). The PNGs from
+     `banner-gen` / `og-gen` remain the `og:image` source of truth — see
+     `design-guide.md` §3 for the format policy and measured sizes.
 4. Verify live: `curl -I https://blog.hoelee.com/<slug>` → expect 200.
 
 ---