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>

src/components/dump/FilePreview.tsx

@@ -12,7 +12,9 @@ import {
   dumpFileUrl,
   dumpThumbnailUrl,
   dumpWaveformUrl,
+  imageProps,
 } from "../../utils/shared/urls.ts";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 import { useAuth } from "../../hooks/auth/useAuth.ts";
 import {
   fileArtworkUrl,
@@ -72,6 +74,7 @@ function FilePlayButton({ dump }: { dump: Dump }) {
       <Thumbnail
         src={fileArtworkUrl(dump, token)}
         className="rich-content-compact-thumbnail"
+        sizes={IMAGE_SIZES.compactThumbnail}
         placeholder={{ seed: dump.fileName ?? dump.id, glyph: mimeIcon(mime) }}
         placeholderClassName="rich-content-compact-thumbnail"
       />
@@ -141,7 +144,10 @@ export function FilePreview(
       // A card needs the server's scaled-down copy, not the full upload.
       return (
         <img
-          src={dumpThumbnailUrl(dump, token)}
+          {...imageProps(
+            dumpThumbnailUrl(dump, token),
+            IMAGE_SIZES.compactThumbnail,
+          )}
           alt={dump.fileName}
           className="rich-content-compact-thumbnail"
           loading="lazy"
@@ -158,6 +164,7 @@ export function FilePreview(
         <Thumbnail
           src={artworkUrl}
           className="rich-content-compact-thumbnail"
+          sizes={IMAGE_SIZES.compactThumbnail}
           placeholder={{
             seed: dump.fileName ?? dump.id,
             glyph: mimeIcon(mime),

src/components/dump/JournalCard.tsx

@@ -10,6 +10,7 @@ import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../../../shared/dump.ts";
 import { relativeTime } from "../../utils/shared/relativeTime.ts";
 import { dumpUrl } from "../../utils/shared/urls.ts";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { useDumpCardLink } from "../../hooks/dump/useDumpCardLink.ts";
 import {
@@ -195,6 +196,7 @@ export const JournalCard: React.MemoExoticComponent<
         <div className="journal-card-image">
           <Thumbnail
             src={thumbnailUrl}
+            sizes={IMAGE_SIZES.journal[shape]}
             placeholder={dump.kind === "file"
               // A video still fails without ffmpeg on the server, and the MIME
               // glyph says more than an initial taken from the file name.

src/components/dump/RichContentCard.tsx

@@ -14,6 +14,7 @@ import {
   usePlayRichContent,
 } from "../../hooks/player/usePlayRichContent.ts";
 import { Thumbnail } from "../shared/Thumbnail.tsx";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 
 /**
  * Passed to {@link RichContentCard} by `DumpCard` (`compact`), `Dump`,
@@ -68,6 +69,7 @@ export function RichContentCard(
         src={thumbnailSrc}
         alt={richContent.title ?? ""}
         className="rich-content-compact-thumbnail"
+        sizes={IMAGE_SIZES.compactThumbnail}
         placeholder={placeholder}
         placeholderClassName="rich-content-compact-thumbnail"
       />
@@ -135,6 +137,7 @@ export function RichContentCard(
       src={thumbnailSrc}
       alt={richContent.title ?? ""}
       className="rich-content-thumbnail"
+      sizes={IMAGE_SIZES.richThumbnail}
       placeholder={placeholder}
       placeholderClassName="rich-content-thumbnail"
     />

src/components/player/GlobalPlayer.tsx

@@ -17,6 +17,7 @@ import {
 import { MediaPlayer } from "./MediaPlayer.tsx";
 import { fmt } from "../../utils/player/duration.ts";
 import { Thumbnail } from "../shared/Thumbnail.tsx";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 import { useYouTubePlaylist } from "../../hooks/player/useYouTubePlaylist.ts";
 import { embedListId, withJsApi } from "../../utils/player/youtube.ts";
 
@@ -201,6 +202,7 @@ export function GlobalPlayer(): React.JSX.Element | null {
           <Thumbnail
             src={current.artworkUrl}
             className="global-player-artwork"
+            sizes={IMAGE_SIZES.playerArtwork}
             placeholder={{ siteName: current.subtitle }}
             placeholderClassName="global-player-artwork"
             loading="eager"

src/components/playlist/PlaylistCard.tsx

@@ -10,7 +10,12 @@ import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
 import { type Playlist, playlistActivity } from "../../../shared/playlist.ts";
 import { relativeTime } from "../../utils/shared/relativeTime.ts";
-import { playlistImageUrl, playlistUrl } from "../../utils/shared/urls.ts";
+import {
+  imageProps,
+  playlistImageUrl,
+  playlistUrl,
+} from "../../utils/shared/urls.ts";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { useCardLink } from "../../hooks/shared/useCardLink.ts";
 import {
@@ -40,6 +45,8 @@ export interface PlaylistCardProps {
    * public badges on every card there would say nothing.
    */
   privateBadgeOnly?: boolean;
+  /** Set for a tile of the playlists page's grid, whose cover is larger. */
+  grid?: boolean;
 }
 
 /**
@@ -51,7 +58,7 @@ export interface PlaylistCardProps {
  * class lays it out: a row in a `.dump-feed`, a tile in a `.playlist-grid`.
  */
 export function PlaylistCard(
-  { playlist, onDelete, isOwner, privateBadgeOnly }: PlaylistCardProps,
+  { playlist, onDelete, isOwner, privateBadgeOnly, grid }: PlaylistCardProps,
 ): React.JSX.Element {
   const { mediaToken } = useAuth();
   const { cardProps } = useCardLink(
@@ -75,7 +82,10 @@ export function PlaylistCard(
           {playlist.imageMime
             ? (
               <img
-                src={playlistImageUrl(playlist, mediaToken)}
+                {...imageProps(
+                  playlistImageUrl(playlist, mediaToken),
+                  grid ? IMAGE_SIZES.playlistTile : IMAGE_SIZES.playlistThumb,
+                )}
                 alt=""
                 className="playlist-card-img"
                 loading="lazy"

src/components/playlist/PlaylistCardList.tsx

@@ -40,6 +40,7 @@ export function PlaylistCardList(
           isOwner={!!user && user.id === p.userId}
           onDelete={onDelete && (() => onDelete(p))}
           privateBadgeOnly={privateBadgeOnly}
+          grid={grid}
         />
       ))}
     </ul>

src/components/playlist/PlaylistHeader.tsx

@@ -9,7 +9,8 @@ import { Link } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import type { PlaylistWithDumps } from "../../../shared/playlist.ts";
-import { playlistImageUrl } from "../../utils/shared/urls.ts";
+import { imageProps, playlistImageUrl } from "../../utils/shared/urls.ts";
+import { IMAGE_SIZES } from "../../config/imageSizes.ts";
 import { relativeTime } from "../../utils/shared/relativeTime.ts";
 import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { Markdown } from "../editor/Markdown.tsx";
@@ -37,7 +38,10 @@ export function PlaylistHeader(
     <>
       {playlist.imageMime && (
         <img
-          src={playlistImageUrl(playlist, mediaToken)}
+          {...imageProps(
+            playlistImageUrl(playlist, mediaToken),
+            IMAGE_SIZES.playlistBanner,
+          )}
           alt=""
           className="playlist-detail-img"
         />

src/components/shared/Avatar.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useContext, useState } from "react";
-import { userApiUrl } from "../../utils/shared/urls.ts";
+import { imageProps, userApiUrl } from "../../utils/shared/urls.ts";
 import { AvatarOverrideContext } from "../../contexts/ws/AvatarOverrideContext.ts";
 
 /**
@@ -25,8 +25,9 @@ export interface AvatarProps {
 }
 
 /**
- * Renders the image from `GET /api/users/:userId/avatar`, or the user's initial
- * when they have none or it fails to load. An avatar added, changed or removed
+ * Renders the image from `GET /api/users/:userId/avatar`, scaled by the server
+ * to the size it is shown at, or the user's initial when they have none or it
+ * fails to load. An avatar added, changed or removed
  * since the caller's data was fetched shows at once, through the
  * `user_updated` messages that `WSProvider` puts in `AvatarOverrideContext`.
  */
@@ -55,7 +56,7 @@ export function Avatar(
       : userApiUrl({ id: userId }, "avatar");
     return (
       <img
-        src={src}
+        {...imageProps(src, size)}
         alt={username}
         title={username}
         style={sizeStyle}

src/components/shared/Thumbnail.tsx

@@ -7,6 +7,7 @@
 
 import { useState } from "react";
 import { canProxyImage, proxyImageUrl } from "../../utils/shared/proxyImage.ts";
+import { imageProps, isApiImageUrl } from "../../utils/shared/urls.ts";
 import {
   ThumbnailPlaceholder,
   type ThumbnailPlaceholderProps,
@@ -23,6 +24,12 @@ export interface ThumbnailProps {
   /** Applies to the image only. */
   className?: string;
   loading?: "lazy" | "eager";
+  /**
+   * The width the image is laid out at, as `imageProps` takes it. An image
+   * the API serves, the site's own or a proxied one, then loads no larger
+   * than that; another site's loads as that site sends it.
+   */
+  sizes: number | string;
   /** Shown when there's no `src` or it fails to load. */
   placeholder: Omit<ThumbnailPlaceholderProps, "className">;
   placeholderClassName?: string;
@@ -42,6 +49,7 @@ export function Thumbnail(
     alt = "",
     className,
     loading = "lazy",
+    sizes,
     placeholder,
     placeholderClassName,
   }: ThumbnailProps,
@@ -64,11 +72,10 @@ export function Thumbnail(
     );
   }
 
+  const url = proxyImageUrl(src, { force: attempt === "proxied" });
   return (
     <img
-      src={attempt === "proxied"
-        ? proxyImageUrl(src, { force: true })
-        : proxyImageUrl(src)}
+      {...(isApiImageUrl(url) ? imageProps(url, sizes) : { src: url })}
       alt={alt}
       className={className}
       loading={loading}

src/config/imageSizes.ts

@@ -0,0 +1,44 @@
+/**
+ * States the width each of the site's images is laid out at, which App.css
+ * sets, so that `imageProps` asks the server for a copy no larger. A number
+ * is a fixed width in CSS pixels, a string a `sizes` attribute for a width
+ * that follows the viewport's. The components that show a thumbnail, a cover
+ * or a player's artwork take theirs from here; an avatar's is its `size`.
+ *
+ * @module
+ */
+
+import type { JournalShape } from "../utils/feed/journalLayout.ts";
+
+/** A tile of the journal's grid spanning one of its columns. */
+const JOURNAL_COLUMN =
+  "(max-width: 460px) 100vw, (max-width: 680px) 50vw, (max-width: 980px) 33vw, 290px";
+/** A tile of the journal's grid spanning two of its columns. */
+const JOURNAL_TWO_COLUMNS =
+  "(max-width: 680px) 100vw, (max-width: 980px) 66vw, 590px";
+
+/** The width of each image, by the place it is shown. */
+export const IMAGE_SIZES = {
+  /**
+   * A compact thumbnail at its widest, in a dump card's preview; the rows
+   * that show it smaller take the same copy.
+   */
+  compactThumbnail: 128,
+  /** A link's thumbnail beside its text, above it on a narrow screen. */
+  richThumbnail: "(max-width: 512px) 100vw, 180px",
+  /** A journal tile's image, by the tile's shape. */
+  journal: {
+    feature: JOURNAL_TWO_COLUMNS,
+    wide: JOURNAL_TWO_COLUMNS,
+    tall: JOURNAL_COLUMN,
+    square: JOURNAL_COLUMN,
+  } satisfies Record<JournalShape, string>,
+  /** A playlist's cover in a row of a list. */
+  playlistThumb: 80,
+  /** A playlist's cover as a tile of the grid, two to a row when narrow. */
+  playlistTile: "(max-width: 512px) 50vw, 250px",
+  /** A playlist's cover as the banner of its page. */
+  playlistBanner: "(max-width: 860px) 100vw, 860px",
+  /** The artwork in the global player's header. */
+  playerArtwork: 36,
+} as const;

src/test/components/dump/FilePreview.test.tsx

@@ -35,7 +35,12 @@ describe("FilePreview", () => {
     const d = file("image/png");
     renderWithContexts(<FilePreview dump={d} compact />, { session });
     const img = screen.getByRole("img", { name: "thing" });
-    expect(img).toHaveAttribute("src", dumpThumbnailUrl(d, session.mediaToken));
+    // The copy scaled to a card's preview, on a dense screen.
+    expect(img).toHaveAttribute(
+      "src",
+      `${dumpThumbnailUrl(d, session.mediaToken)}&w=320`,
+    );
+    expect(img).toHaveAttribute("sizes", "128px");
     expect(img).toHaveAttribute("loading", "lazy");
   });
 
@@ -101,7 +106,7 @@ describe("FilePreview", () => {
     );
     expect(container.querySelector("button img")).toHaveAttribute(
       "src",
-      dumpThumbnailUrl(d),
+      `${dumpThumbnailUrl(d)}&w=320`,
     );
   });
 

src/test/components/dump/JournalCard.test.tsx

@@ -123,8 +123,9 @@ describe("JournalCard", () => {
         <JournalCard dump={dump} shape="tall" {...base} />
       </ul>,
     );
-    expect(container.querySelector("img")!.getAttribute("src")).toBe(
-      dumpThumbnailUrl(dump),
-    );
+    const img = container.querySelector("img")!;
+    expect(img.getAttribute("src")).toBe(`${dumpThumbnailUrl(dump)}&w=960`);
+    // A tile of one column: the browser takes a narrower copy for it.
+    expect(img.getAttribute("sizes")).toContain("290px");
   });
 });

src/test/components/dump/RichContentCard.test.tsx

@@ -75,7 +75,7 @@ describe("RichContentCard", () => {
     );
     expect(screen.getByRole("img", { name: "A video" })).toHaveAttribute(
       "src",
-      "http://localhost:8000/api/dumps/d/thumbnail",
+      "http://localhost:8000/api/dumps/d/thumbnail?w=960",
     );
   });
 

src/test/components/shared/Avatar.test.tsx

@@ -5,14 +5,17 @@ import { AvatarOverrideContext } from "../../../contexts/ws/AvatarOverrideContex
 import { renderWithContexts } from "../../render.tsx";
 
 describe("Avatar", () => {
-  test("an image when the user has one, versioned", () => {
+  test("an image when the user has one, versioned, at the size shown", () => {
     renderWithContexts(
-      <Avatar userId="u1" username="ann" hasAvatar version={7} />,
+      <Avatar userId="u1" username="ann" hasAvatar version={7} size={32} />,
     );
-    expect(screen.getByRole("img", { name: "ann" })).toHaveAttribute(
+    const img = screen.getByRole("img", { name: "ann" });
+    expect(img).toHaveAttribute(
       "src",
-      "http://localhost:8000/api/users/u1/avatar?v=7",
+      "http://localhost:8000/api/users/u1/avatar?v=7&w=128",
     );
+    expect(img).toHaveAttribute("sizes", "32px");
+    expect(img.getAttribute("srcset")).toContain("avatar?v=7&w=320 320w");
   });
 
   test("initials otherwise, and after the image fails", () => {

src/test/components/shared/Thumbnail.test.tsx

@@ -11,17 +11,20 @@ describe("Thumbnail", () => {
       <Thumbnail
         src="https://img.test/a.png"
         alt="art"
+        sizes={128}
         placeholder={placeholder}
       />,
     );
     const img = screen.getByRole("img", { name: "art" });
     expect(img).toHaveAttribute("src", "https://img.test/a.png");
     expect(img).toHaveAttribute("referrerpolicy", "no-referrer");
+    // Another site's image comes as that site sends it.
+    expect(img).not.toHaveAttribute("srcset");
     fireEvent.error(img);
-    expect(screen.getByRole("img", { name: "art" }).getAttribute("src"))
-      .toContain(
-        "/api/remote/image?url=",
-      );
+    const proxied = screen.getByRole("img", { name: "art" });
+    expect(proxied.getAttribute("src")).toContain("/api/remote/image?url=");
+    // Through the proxy, it is scaled as the site's own are.
+    expect(proxied.getAttribute("srcset")).toContain("a.png&w=128 128w");
     fireEvent.error(screen.getByRole("img", { name: "art" }));
     expect(screen.queryByRole("img", { name: "art" })).not.toBeInTheDocument();
     expect(screen.getByText("S")).toBeInTheDocument();
@@ -32,16 +35,24 @@ describe("Thumbnail", () => {
       <Thumbnail
         src="http://localhost:8000/api/dumps/d/thumbnail"
         alt="t"
+        sizes="(max-width: 512px) 100vw, 180px"
         placeholder={placeholder}
       />,
     );
-    fireEvent.error(screen.getByRole("img", { name: "t" }));
+    const img = screen.getByRole("img", { name: "t" });
+    expect(img).toHaveAttribute(
+      "src",
+      "http://localhost:8000/api/dumps/d/thumbnail?w=960",
+    );
+    expect(img.getAttribute("srcset")).toContain("thumbnail?w=320 320w");
+    expect(img).toHaveAttribute("sizes", "(max-width: 512px) 100vw, 180px");
+    fireEvent.error(img);
     expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
   });
 
   test("no src: straight to the placeholder; a new src tries again", () => {
     const { rerender } = renderWithContexts(
-      <Thumbnail placeholder={placeholder} alt="t" />,
+      <Thumbnail placeholder={placeholder} alt="t" sizes={128} />,
     );
     expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
     rerender(
@@ -49,6 +60,7 @@ describe("Thumbnail", () => {
         src="https://img.test/b.png"
         placeholder={placeholder}
         alt="t"
+        sizes={128}
       />,
     );
     expect(screen.getByRole("img", { name: "t" })).toBeInTheDocument();

src/test/pages/PlaylistDetail.test.tsx

@@ -126,7 +126,7 @@ describe("PlaylistDetail", () => {
     await screen.findByRole("heading", { name: "Mix" });
     expect(document.querySelector(".playlist-detail-img")).toHaveAttribute(
       "src",
-      "http://localhost:8000/api/playlists/p1/cover?v=5000",
+      "http://localhost:8000/api/playlists/p1/cover?v=5000&w=960",
     );
   });
 
@@ -324,7 +324,7 @@ describe("PlaylistDetail", () => {
     await waitFor(() =>
       expect(document.querySelector(".playlist-detail-img")).toHaveAttribute(
         "src",
-        "http://localhost:8000/api/playlists/p1/cover?v=9000",
+        "http://localhost:8000/api/playlists/p1/cover?v=9000&w=960",
       )
     );
   });

src/test/pages/UserPublicProfile.test.tsx

@@ -523,7 +523,7 @@ describe("UserPublicProfile", () => {
         expect(document.querySelector(".profile-avatar-wrapper img"))
           .toHaveAttribute(
             "src",
-            "http://localhost:8000/api/users/ann/avatar?v=7000",
+            "http://localhost:8000/api/users/ann/avatar?v=7000&w=320",
           )
       );
     });

src/test/utils/shared/urls.test.ts

@@ -3,6 +3,8 @@ import {
   dumpFileUrl,
   dumpThumbnailUrl,
   dumpUrl,
+  imageProps,
+  isApiImageUrl,
   isAt,
   normalizeUrl,
   playlistImageUrl,
@@ -65,4 +67,27 @@ describe("urls", () => {
     expect(playlistImageUrl({ id: "p", isPublic: false }, null))
       .toBe(`${API_URL}/api/playlists/p/cover`);
   });
+  test("imageProps asks for the copies the server makes, by the width shown", () => {
+    const avatar = `${API_URL}/api/users/u1/avatar`;
+    expect(imageProps(avatar, 32)).toEqual({
+      src: `${avatar}?w=128`,
+      srcSet: [128, 320, 640, 960].map((w) => `${avatar}?w=${w} ${w}w`)
+        .join(", "),
+      sizes: "32px",
+    });
+    // Twice the width shown, for a dense screen that reads only `src`.
+    expect(imageProps(avatar, 128).src).toBe(`${avatar}?w=320`);
+    // A URL with a query keeps it, and a width that follows the viewport's
+    // takes the widest copy as its `src`.
+    const cover = `${API_URL}/api/playlists/p1/cover?v=7`;
+    const fluid = imageProps(cover, "(max-width: 512px) 50vw, 250px");
+    expect(fluid.src).toBe(`${cover}&w=960`);
+    expect(fluid.srcSet).toContain(`${cover}&w=640 640w`);
+    expect(fluid.sizes).toBe("(max-width: 512px) 50vw, 250px");
+  });
+  test("isApiImageUrl tells the API's images from another site's", () => {
+    expect(isApiImageUrl(`${API_URL}/api/dumps/d1/thumbnail`)).toBe(true);
+    expect(isApiImageUrl(`${API_URL}/api/remote/image?url=x`)).toBe(true);
+    expect(isApiImageUrl("https://img.test/a.png")).toBe(false);
+  });
 });

src/utils/shared/urls.ts

@@ -14,6 +14,7 @@ import {
   playlistPath,
 } from "../../../shared/paths.ts";
 import { dumpFileVersion } from "../../../shared/dump.ts";
+import { IMAGE_WIDTHS, snapImageWidth } from "../../../shared/image.ts";
 
 /**
  * Passed to {@link dumpFileUrl} and {@link dumpThumbnailUrl}, usually as a
@@ -166,3 +167,36 @@ export function playlistImageUrl(
     params.length ? `?${params.join("&")}` : ""
   }`;
 }
+
+/**
+ * Checks whether `url` is an image the API serves, its own or one it proxies,
+ * which all take `?w=` and answer a scaled-down copy. Another site's image,
+ * loaded from its own host, doesn't.
+ */
+export function isApiImageUrl(url: string): boolean {
+  return url.startsWith(`${API_URL}/api/`);
+}
+
+/**
+ * Returns what an `<img>` needs to load `url`, one of the API's images, no
+ * larger than it is shown: a `srcset` of the copies the server makes
+ * (`shared/image.ts`), from which the browser takes the narrowest that fills
+ * `sizes` on its screen, and a `src` for whatever reads only that. `sizes` is
+ * the width the image is laid out at, in CSS pixels, or a `sizes` attribute
+ * when that width follows the viewport's. `Avatar`, `Thumbnail` and the
+ * playlists' covers spread it on their image.
+ */
+export function imageProps(
+  url: string,
+  sizes: number | string,
+): { src: string; srcSet: string; sizes: string } {
+  const at = (width: number) =>
+    `${url}${url.includes("?") ? "&" : "?"}w=${width}`;
+  return {
+    // Twice the laid-out width, as most screens want; the widest when that
+    // width isn't known here.
+    src: at(snapImageWidth(typeof sizes === "number" ? sizes * 2 : Infinity)),
+    srcSet: IMAGE_WIDTHS.map((width) => `${at(width)} ${width}w`).join(", "),
+    sizes: typeof sizes === "number" ? `${sizes}px` : sizes,
+  };
+}