v4: every image the API serves comes scaled to the size it is shown at — a first visit to the feed loaded 4.8 MB of images out of 5.1 MB in all: an avatar shown at 32 pixels was the upload itself, a 1.4 MB GIF among them, and so were a cover, a custom thumbnail, an attachment and a proxied image, only an image dump having a preview, 960 pixels wide. Every route that answers an image now takes ?w= and sends a WebP copy at most that wide, of the widths shared/image.ts lists, 128, 320, 640 and 960, a width between two taking the one above, and never wider than the image; without it the upload goes out as before, a dump's thumbnail alone being scaled to the widest by default, the custom ones included. serveImage (lib/upload.ts) is where they all end, and the image proxy scales what it fetched the same way, keeping each width in its cache. lib/ffmpeg.ts makes the copies as it made the previews, which they replace: on first request, under uploads/scaled/ at the upload's own path, each given its upload's date and made again when the two differ, so a new avatar or cover needs nobody to delete the old ones. WebP keeps a PNG's transparency and a GIF's animation. A JPEG is turned by its EXIF orientation here, ffmpeg's own rotation of images depending on its version. An animated WebP, which ffmpeg can't read, and an image it fails on go out as they are, a failure being remembered until the upload changes. ?f=compat asks for the copy as a JPEG, or a PNG for what may be transparent: the digest's emails take their thumbnails that way, at 640 pixels, not every mail client reading WebP. On the client, imageProps (utils/shared/urls.ts) gives an image its srcset of those copies and the width it is laid out at, which config/imageSizes.ts states for each place from App.css: Avatar, Thumbnail, which scales an API image and leaves another site's as that site sends it, and the playlists' covers use it. The images of notes and comments still load as uploaded. The copies go with the dump, the custom thumbnail or the attachment they were made from, and generatedMediaSweepJob, a minute after the start then daily, takes those whose upload is gone, the previews under their former name and the temporary files a generation left unfinished.

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

api/remote/image-proxy.ts

@@ -3,12 +3,15 @@
  * http, which an https page would block, and those behind hotlink protection.
  * It fetches and caches the images `GET /api/remote/image` serves, which the
  * frontend routes a thumbnail through when it is on http or when loading it
- * directly failed.
+ * directly failed, and scales them down as the site's own are.
  *
  * @module
  */
 
 import { fetchWithTimeout, readBytesCapped } from "./fetch.ts";
+import type { ImageWidth } from "../../shared/image.ts";
+import { scaleImageBytes } from "../lib/ffmpeg.ts";
+import { scalableImage } from "../lib/upload.ts";
 
 /**
  * Returned to `GET /api/remote/image` by {@link fetchProxiedImage}, which sends
@@ -34,9 +37,9 @@ const PROXYABLE_IMAGE_TYPES = new Set([
 const IMAGE_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 const IMAGE_CACHE_MAX_BYTES = 32 * 1024 * 1024;
 /**
- * Proxied images, by URL, since every viewer of a feed asks for the same
- * thumbnails. The least recently used go first, and the Map's order is that
- * of use.
+ * Proxied images, by URL and by the width they were scaled to, since every
+ * viewer of a feed asks for the same thumbnails. The least recently used go
+ * first, and the Map's order is that of use.
  */
 const imageCache = new Map<
   string,
@@ -89,15 +92,34 @@ export function clearImageCache(): void {
 /**
  * Returns the image at `url`, from the cache or else from its host; null when
  * the host answers with an error, or with anything but a raster image of 5 MB
- * at most. The route
- * checks `url` with `isValidHttpUrl` first.
+ * at most. With `width`, it comes as a WebP copy scaled down to it, or as it
+ * is when no copy can be made (`scalableImage`, and ffmpeg). The route checks
+ * `url` with `isValidHttpUrl` first.
  *
  * @throws {Error} When the host can't be reached, as
  * {@link fetchWithTimeout} reports it.
  */
 export async function fetchProxiedImage(
   url: string,
+  width?: ImageWidth | null,
 ): Promise<ProxiedImage | null> {
+  if (!width) return await fetchOriginal(url);
+
+  const key = `${url}#w${width}`;
+  const cached = readImageCache(key);
+  if (cached) return cached;
+  const original = await fetchOriginal(url);
+  if (!original) return null;
+  const how = scalableImage(original.bytes);
+  const bytes = how &&
+    await scaleImageBytes(original.bytes, width, how.orientation);
+  if (!bytes) return original;
+  writeImageCache(key, bytes, "image/webp");
+  return { bytes, contentType: "image/webp" };
+}
+
+/** Returns the image at `url` as its host sends it: see above. */
+async function fetchOriginal(url: string): Promise<ProxiedImage | null> {
   const cached = readImageCache(url);
   if (cached) return cached;