fix: image transforms — preserve aspect ratio, increase quality

- preview/medium use fit:inside (no forced crop, preserves aspect ratio)
- Only mini/thumbnail/banner force square/fixed crops
- Increase WebP quality 85 → 92
- Increase preview width 480 → 800, medium 960 → 1400

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/backend/src/index.ts

@@ -69,13 +69,13 @@ async function main() {
       yoga.handleNodeRequestAndResponse(req, reply, { req, reply, db, redis }),
   });
 
-  // Transform presets: width x height (height optional = keep aspect ratio)
-  const TRANSFORMS: Record<string, { width: number; height?: number }> = {
-    mini: { width: 64, height: 64 },
-    thumbnail: { width: 200, height: 200 },
-    preview: { width: 480, height: 270 },
-    medium: { width: 960 },
-    banner: { width: 1280, height: 400 },
+  // Transform presets — only banner/thumbnail force a crop; others preserve aspect ratio
+  const TRANSFORMS: Record<string, { width: number; height?: number; fit?: "cover" | "inside" }> = {
+    mini: { width: 80, height: 80, fit: "cover" },
+    thumbnail: { width: 300, height: 300, fit: "cover" },
+    preview: { width: 800, fit: "inside" },
+    medium: { width: 1400, fit: "inside" },
+    banner: { width: 1600, height: 480, fit: "cover" },
   };
 
   // Serve uploaded files: GET /assets/:id?transform=<preset>
@@ -101,8 +101,8 @@ async function main() {
       if (!existsSync(cacheFile)) {
         const originalPath = path.join(UPLOAD_DIR, id, filename);
         await sharp(originalPath)
-          .resize({ width: preset.width, height: preset.height, fit: "cover", withoutEnlargement: true })
-          .webp({ quality: 85 })
+          .resize({ width: preset.width, height: preset.height, fit: preset.fit ?? "inside", withoutEnlargement: true })
+          .webp({ quality: 92 })
           .toFile(cacheFile);
       }
       reply.header("Content-Type", "image/webp");