perf(showcase): cap main viewer image width at 2400 via display mode

- New OptimizationMode.DISPLAY (width=2400 for images, full quality for
  videos) and getDisplayUrl(); the in-modal main viewer renders at most
  ~1200 CSS px wide, so full-size originals wasted 50-70% bandwidth
- Main viewer and adjacent prefetch use display URLs; the full-size
  media viewer keeps using getShowcaseUrl for original quality

static/js/utils/civitaiUtils.js

@@ -9,6 +9,9 @@
 export const OptimizationMode = {
     /** Full quality for showcase/display - uses /optimized=true only */
     SHOWCASE: 'showcase',
+    /** In-modal display - caps image width at 2400 (covers the ~1200 CSS px
+     * main viewer at DPR 2); videos stay full quality */
+    DISPLAY: 'display',
     /** Thumbnail size for cards - uses /width=450,optimized=true */
     THUMBNAIL: 'thumbnail',
     /** Small thumbnails for the showcase gallery strip (72px display) - uses /width=160,optimized=true */
@@ -97,15 +100,20 @@ export function rewriteCivitaiUrl(sourceUrl, mediaType = null, mode = Optimizati
         }
 
         // Determine replacement based on mode and media type
+        const isVideo = Boolean(mediaType && mediaType.toLowerCase() === 'video');
         let replacement;
         if (mode === OptimizationMode.SHOWCASE) {
             // Full quality for showcase - no width restriction
             replacement = '/optimized=true';
+        } else if (mode === OptimizationMode.DISPLAY) {
+            // Display mode caps image width for in-modal viewing; videos stay
+            // full quality (CDN transcoding costs more than it saves here)
+            replacement = isVideo ? '/optimized=true' : '/width=2400,optimized=true';
         } else {
             // Thumbnail modes with width restriction
             const width = mode === OptimizationMode.GALLERY_THUMBNAIL ? 160 : 450;
             replacement = `/width=${width},optimized=true`;
-            if (mediaType && mediaType.toLowerCase() === 'video') {
+            if (isVideo) {
                 replacement = `/transcode=true,width=${width},optimized=true`;
             }
         }
@@ -153,6 +161,19 @@ export function getShowcaseUrl(url, type = 'image') {
     return getOptimizedUrl(url, type, OptimizationMode.SHOWCASE);
 }
 
+/**
+ * Get display-optimized URL for the in-modal main viewer (images capped at
+ * width=2400; videos full quality). Use getShowcaseUrl for full-size viewing
+ * (e.g. the media viewer overlay)
+ *
+ * @param {string} url - Original URL
+ * @param {string} type - Media type ("image" or "video")
+ * @returns {string} - Optimized URL for in-modal display
+ */
+export function getDisplayUrl(url, type = 'image') {
+    return getOptimizedUrl(url, type, OptimizationMode.DISPLAY);
+}
+
 /**
  * Get thumbnail-optimized URL (width=450)
  *