perf(plex): a card fetches its picture at a card's size, not the detail page's

Cards fetched the full cuts: a 400x600 poster (~38 KB) for a ~144px picture and the 1280x720
backdrop (~162 KB) for a ~212px shelf picture. The image proxy now also cuts thumb_sm (240x360)
and art_sm (480x270), cached apart; card pictures (grid, shelves, collection tiles, Up next) carry
both in srcset with sizes=auto, so the browser picks by laid-out width and DPR. Localdev:
17 KB a poster, 56 KB a backdrop. The detail page keeps the full cuts.

frontend/src/components/PosterTile.tsx

@@ -3,6 +3,7 @@ import { hueOf, hueTileGradient } from "../lib/hueTile";
 import { navItemAttrs } from "../lib/listNav";
 import { MEDIA_IMG } from "./ui/mediaCardStyles";
 import { Pressable } from "./ui/Pressable";
+import { cardImage } from "../lib/plexImage";
 
 // A browse tile split in two: the TOP half shows up to 2 montage posters (from /api/plex/image/{key}),
 // the BOTTOM half is a solid colour-hash band that carries the label — so the text is always readable
@@ -50,7 +51,7 @@ export default function PosterTile({
             posters[i] ? (
               <img
                 key={i}
-                src={`/api/plex/image/${posters[i]}`}
+                {...cardImage(`/api/plex/image/${posters[i]}`)}
                 alt=""
                 loading="lazy"
                 className={MEDIA_IMG}

frontend/src/components/UpNextCard.tsx

@@ -5,6 +5,7 @@ import { Play, X } from "lucide-react";
 import { api } from "../lib/api";
 import { plexLang } from "../i18n";
 import { qk } from "../lib/queryKeys";
+import { cardImage } from "../lib/plexImage";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 
@@ -72,8 +73,9 @@ export function UpNextCard({
       <div className="h-[6.5rem] w-[4.6rem] flex-none overflow-hidden rounded-lg bg-white/10">
         {next && (
           <img
-            src={api.plexImageUrl(nextId, "thumb")}
+            {...cardImage(api.plexImageUrl(nextId, "thumb"))}
             alt=""
+            loading="lazy"
             className="h-full w-full object-cover"
             draggable={false}
           />

frontend/src/components/plexCards.dom.test.tsx

@@ -363,3 +363,19 @@ describe("PlexPosterCard on a shelf", () => {
     }
   });
 });
+
+// E31 S4e: a card fetched the detail page's 400px poster for its ~144px picture. It offers the
+// proxy's small cut too and lets the browser pick by its width.
+describe("a Plex card's picture", () => {
+  it("offers the small cut beside the full one, lazily", () => {
+    const { container } = render(
+      <PlexPosterCard card={{ ...movie(), thumb: "/api/plex/image/1" }} onOpen={vi.fn()} />,
+    );
+    const img = container.querySelector("img")!;
+    expect(img.getAttribute("srcset")).toBe(
+      "/api/plex/image/1?variant=thumb_sm 240w, /api/plex/image/1 400w",
+    );
+    expect(img.getAttribute("sizes")).toBe("auto, 200px");
+    expect(img.getAttribute("loading")).toBe("lazy");
+  });
+});

frontend/src/components/plexCards.tsx

@@ -27,6 +27,7 @@ import { MediaCard, MediaProgress, MediaPlayGlyph } from "./ui/MediaCard";
 import { MediaPreview } from "./ui/MediaPreview";
 import { useMediaPreview } from "./ui/useMediaPreview";
 import { SURFACE } from "./ui/surfaces";
+import { cardImage } from "../lib/plexImage";
 
 // Presentational Plex cards + strips, split out of PlexBrowse (all purely prop-driven, no shared
 // state). Rendered by the browse grid, the person page, and the series show/season views.
@@ -211,10 +212,19 @@ function PlexPicture({
   // Not read off `pct`: that is rounded, so 20 s into a 3 h film was 0 % and "not started" here while
   // the menu offered "from the start" (E28 review D4). One rule, `plexStarted`, for both.
   const resumable = plays && started && !!onRestart;
+  const pic = cardImage(thumb);
   return (
     <div className={mediaPictureBox(aspect)}>
       <Pressable onClick={onOpen} aria-label={label} data-nav-open="" className={MEDIA_PICTURE}>
-        <img src={thumb} alt="" loading="lazy" decoding="async" className={MEDIA_IMG} />
+        <img
+          srcSet={pic.srcSet}
+          sizes={pic.sizes}
+          src={pic.src}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          className={MEDIA_IMG}
+        />
         {children}
         <div className={MEDIA_HOVER_LAYER}>
           {plays && !resumable && <MediaPlayGlyph small={small} />}