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/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} />}