perf(app): use _400.webp variants for map thumbnails

Map nodes render at ~22 px but were loading the full-size GCS PNGs
(~40–100 KB each) — total ~15 MB for 312 specs.

The responsive-image pipeline already bakes _400.webp variants
(~6 KB each), so swap selectMapThumbUrl to derive `{base}_400.webp`
from the chosen theme URL. Total payload drops to ~2 MB. Falls back
to the original URL if it isn't `.png`.

Refs #5646

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/pages/MapPage.helpers.test.ts

@@ -160,19 +160,28 @@ describe('buildKNNLinks', () => {
 
 
 describe('selectMapThumbUrl', () => {
-  it('returns dark URL in dark mode, light in light mode', () => {
+  it('returns the _400.webp variant for the current theme', () => {
     const s = spec('a', null);
-    expect(selectMapThumbUrl(s, true)).toBe('https://example.com/a-dark.png');
-    expect(selectMapThumbUrl(s, false)).toBe('https://example.com/a-light.png');
+    expect(selectMapThumbUrl(s, true)).toBe('https://example.com/a-dark_400.webp');
+    expect(selectMapThumbUrl(s, false)).toBe('https://example.com/a-light_400.webp');
   });
 
-  it('falls back to the other theme when the preferred URL is missing', () => {
+  it('falls back to the other theme variant when the preferred URL is missing', () => {
     const s: SpecMapItem = { ...spec('a', null), preview_url_dark: null };
-    expect(selectMapThumbUrl(s, true)).toBe('https://example.com/a-light.png');
+    expect(selectMapThumbUrl(s, true)).toBe('https://example.com/a-light_400.webp');
   });
 
   it('returns null when no preview URLs at all', () => {
     const s: SpecMapItem = { ...spec('a', null), preview_url_light: null, preview_url_dark: null };
     expect(selectMapThumbUrl(s, false)).toBeNull();
   });
+
+  it('returns the original URL unchanged if it does not end in .png', () => {
+    const s: SpecMapItem = {
+      ...spec('a', null),
+      preview_url_light: 'https://example.com/a-light.svg',
+      preview_url_dark: null,
+    };
+    expect(selectMapThumbUrl(s, false)).toBe('https://example.com/a-light.svg');
+  });
 });

app/src/pages/MapPage.helpers.ts

@@ -142,9 +142,21 @@ export function buildKNNLinks(
   return Array.from(linkSet.values());
 }
 
-/** Pick the best thumbnail URL for the current theme. Wraps selectPreviewUrl. */
+/**
+ * Pick the best thumbnail URL for the current theme and downsize it to the
+ * `_400.webp` variant produced by the responsive-image pipeline. Map nodes
+ * render at ~22 px, so even 400 px is overkill — but 400 is the smallest
+ * pipeline-baked variant. Going from full-size (~40–100 KB) to _400.webp
+ * (~6 KB) cuts the 312-thumbnail payload from ~15 MB to ~2 MB.
+ *
+ * Falls back to the original full-size URL if the convention can't be
+ * applied (e.g. URL doesn't end in `.png`).
+ */
 export function selectMapThumbUrl(spec: SpecMapItem, isDark: boolean): string | null {
-  return selectPreviewUrl(spec, isDark);
+  const full = selectPreviewUrl(spec, isDark);
+  if (!full) return null;
+  if (!full.endsWith('.png')) return full;
+  return full.replace(/\.png$/, '_400.webp');
 }
 
 /**