feat(images): responsive <picture> srcset for posts/blocks, drop AVIF for build speed

## Responsive sources

Wire `ensureResponsiveImage` (multi-width × multi-format srcset) into the three
remaining single-`<img>` components:

- ImageBlock (body): widths 600 + 1200, fit follows transform params
- ImageGalleryBlock (single-image branch): widths 600 + 1280, fit=contain
- PostCard (post-list cards): widths 400 + 800, fit=cover, ar=3:2

`resolveContentImages` now sets `block.resolvedResponsive` alongside the legacy
`resolvedImageSrc`, so every Svelte block component renders `<picture>` if
the responsive shape is present and falls back to a plain `<img>` otherwise.

Posts list pages (`/posts`, `/posts/page/N`, `/posts/tag/.../page/N`) call a
new `resolvePostCardResponsive` helper instead of one-shot `ensureTransformedImage`.

## Drop AVIF from defaults

Server-side AVIF encoding on the CMS is 5-10× slower than WebP. The bandwidth
win is marginal for this site and the build time hit is severe (multi-minute
hangs on each new variant). Default formats are now `["webp", "jpeg"]` for
`ensureResponsiveImage`, in `Layout.astro`'s TopBanner hero, and in the
post-card helper. Callers can still opt back into AVIF per-call.

## Module split for client-safe types

`ResponsiveImage` is now defined in a tiny `rusty-image-types.ts` and
duplicated in `rusty-image.ts` so Svelte components can `import type` the
shape without dragging `rusty-image.ts` (and its `node:crypto`/`node:fs`
imports) into the browser bundle.

`resolvePostCardResponsive` lives in a new `server-image.ts` for the same
reason — `blog-utils.ts` is imported by Svelte islands, so its server-only
helpers move out.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/blocks/ImageBlock.svelte

@@ -45,12 +45,29 @@
 <div class={layoutClasses} data-block-type="image" data-block-slug={block._slug}>
   {#if imageUrl}
     <figure class="max-w-[400px]">
-      <img
-        src={imageUrl}
-        alt={block.caption ?? title ?? ""}
-        class="w-full rounded-sm"
-        loading="lazy"
-      />
+      {#if block.resolvedResponsive}
+        <picture>
+          {#each block.resolvedResponsive.sources as s (s.type)}
+            <source type={s.type} srcset={s.srcset} sizes="(max-width: 768px) 100vw, 400px" />
+          {/each}
+          <img
+            src={block.resolvedResponsive.fallback}
+            width={block.resolvedResponsive.width}
+            height={block.resolvedResponsive.height}
+            alt={block.caption ?? title ?? ""}
+            class="w-full rounded-sm"
+            loading="lazy"
+            decoding="async"
+          />
+        </picture>
+      {:else}
+        <img
+          src={imageUrl}
+          alt={block.caption ?? title ?? ""}
+          class="w-full rounded-sm"
+          loading="lazy"
+        />
+      {/if}
       {#if block.caption}
         <figcaption class="mt-1 text-sm text-zinc-600">{block.caption}</figcaption>
       {/if}

src/components/blocks/ImageGalleryBlock.svelte

@@ -150,12 +150,29 @@
     <p class="text-sm text-stein-500">{t(T.image_gallery_empty)}</p>
   {:else if withUrl.length === 1}
     <figure class="m-0">
-      <img
-        src={withUrl[0].url}
-        alt={withUrl[0].img.description ?? ""}
-        class="w-full rounded-sm object-cover aspect-video"
-        loading="eager"
-      />
+      {#if withUrl[0].img.resolvedResponsive}
+        <picture>
+          {#each withUrl[0].img.resolvedResponsive.sources as s (s.type)}
+            <source type={s.type} srcset={s.srcset} sizes="(max-width: 768px) 100vw, 1024px" />
+          {/each}
+          <img
+            src={withUrl[0].img.resolvedResponsive.fallback}
+            width={withUrl[0].img.resolvedResponsive.width}
+            height={withUrl[0].img.resolvedResponsive.height}
+            alt={withUrl[0].img.description ?? ""}
+            class="w-full rounded-sm object-cover aspect-video"
+            loading="eager"
+            decoding="async"
+          />
+        </picture>
+      {:else}
+        <img
+          src={withUrl[0].url}
+          alt={withUrl[0].img.description ?? ""}
+          class="w-full rounded-sm object-cover aspect-video"
+          loading="eager"
+        />
+      {/if}
       {#if withUrl[0].img.description}
         <figcaption class="mt-1 text-sm text-stein-600">{withUrl[0].img.description}</figcaption>
       {/if}