valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: image transforms — preserve aspect ratio, increase quality
Some checks failed
Build and Push Backend Image / build (push) Successful in 40s
Details
Build and Push Frontend Image / build (push) Has been cancelled
Details

Browse Source 
- 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>
This commit is contained in:
Sebastian Krüger
2026-03-04 21:22:30 +01:00
parent 05cb6a66e3
commit 845e3df223
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/backend/src/index.ts
View File

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