recipes: replace placeholder images with OKLAB dominant color backgrounds

Instead of generating/serving 20px placeholder images with blur CSS, extract a perceptually accurate dominant color (Gaussian-weighted OKLAB average) and use it as a solid background-color while the full image loads. Removes placeholder image generation, blur CSS/JS, and placeholder directory references across upload flows, API routes, service worker, and all card/hero components. Adds admin bulk tool to backfill colors for existing recipes.
2026-02-17 18:12:36 +01:00
parent 0ea09e424e
commit d65a418092
21 changed files with 592 additions and 108 deletions
--- a/src/lib/components/recipes/Card.svelte
+++ b/src/lib/components/recipes/Card.svelte
@@ -36,6 +36,8 @@ const img_name = $derived(
 const img_alt = $derived(
 	recipe.images?.[0]?.alt || recipe.name
 );
+
+const img_color = $derived(recipe.images?.[0]?.color || '');
 </script>
 <style>
 .card-main-link {
@@ -93,21 +95,16 @@ const img_alt = $derived(
 	transition: var(--transition-normal);
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
+	opacity: 0;
 }
-.blur{
-	filter: blur(10px);
-}
-.backdrop_blur{
-	backdrop-filter: blur(10px);
+.image.loaded{
+	opacity: 1;
 }
 .card-image{
 	width: 300px;
 	height: 255px;
 	position: absolute;
 	top: 0;
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
 	overflow: hidden;
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
@@ -232,11 +229,11 @@ const img_alt = $derived(
 	<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
 		<span class="visually-hidden">View recipe: {recipe.name}</span>
 	</a>
-	<div class="card-image" style="background-image:url(https://bocken.org/static/rezepte/placeholder/{img_name})">
+	<div class="card-image" style:background-color={img_color}>
 		<noscript>
-			<img class="image backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{img_alt}"/>
+			<img class="image loaded" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{img_alt}"/>
 		</noscript>
-		<img class="image backdrop_blur" class:blur={!isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
+		<img class="image" class:loaded={isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
 	</div>
 	{#if showFavoriteIndicator && isFavorite}
 		<div class="favorite-indicator">❤️</div>
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -20,6 +20,8 @@
 		recipe.images?.[0]?.alt || recipe.name
 	);

+	const img_color = $derived(recipe.images?.[0]?.color || '');
+
 	const isInSeason = $derived(icon_override || recipe.season?.includes(current_month));
 </script>
 <style>
@@ -160,7 +162,7 @@
 	{#if showFavoriteIndicator && isFavorite}
 		<span class="favorite">❤️</span>
 	{/if}
-	<div class="img-wrap">
+	<div class="img-wrap" style:background-color={img_color}>
 		<img
 			src="https://bocken.org/static/rezepte/thumb/{img_name}"
 			alt={img_alt}
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from "svelte";

-	let { src, placeholder_src, alt = "", children } = $props();
+	let { src, color = '', alt = "", children } = $props();

 	let isloaded = $state(false);
 	let isredirected = $state(false);
@@ -79,21 +79,27 @@
  margin: 0;
 }

+.image-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: min(1000px, 100dvw);
+  height: max(60dvh,600px);
+  overflow: hidden;
+}

 .image{
  display: block;
  position: absolute;
  top: 0;
  width: min(1000px, 100dvw);
-  z-index: -1;
  opacity: 0;
  transition: var(--transition-normal);
  height: max(60dvh,600px);
  object-fit: cover;
  object-position: 50% 20%;
-  backdrop-filter: blur(20px);
-  filter: blur(20px);
-  z-index: -10;
 }

 .image-container::after {
@@ -106,32 +112,7 @@
 :global(h1){
 	width: 100%;
 }
-.placeholder{
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: 50% 20%;
-	position: absolute;
-	width: min(1000px, 100dvw);
-	height: max(60dvh,600px);
-	z-index: -2;
-}
-.placeholder_blur{
-	width: inherit;
-	height: inherit;
-	backdrop-filter: blur(20px);
-}
-div:has(.placeholder){
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	margin-inline: auto;
-        width: min(1000px, 100dvw);
-  	height: max(60dvh,600px);
-	overflow: hidden;
-}
 .unblur.image{
-	filter: blur(0px) !important;
 	opacity: 1;
 }

@@ -175,13 +156,11 @@ dialog button{
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
    	<div class:zoom-in={isloaded && !isredirected} onclick={show_dialog_img}>
-		<div class=placeholder style="background-image:url({placeholder_src})" >
-			<div class=placeholder_blur>
+		<div class="image-wrap" style:background-color={color}>
 			<img class="image" class:unblur={isloaded} {src} onload={() => {isloaded=true}}  {alt}/>
-			</div>
 		</div>
 		<noscript>
-			<div class=placeholder style="background-image:url({placeholder_src})" >
+			<div class="image-wrap" style:background-color={color}>
 				<img class="image unblur" {src} onload={() => {isloaded=true}}  {alt}/>
 			</div>
 		</noscript>
--- a/src/lib/server/recipeHelpers.ts
+++ b/src/lib/server/recipeHelpers.ts
@@ -37,7 +37,7 @@ export function toBrief(recipe: any, recipeLang: string): BriefRecipeType {
 			name: recipe.translations.en.name,
 			short_name: recipe.translations.en.short_name,
 			images: recipe.images?.[0]
-				? [{ alt: recipe.images[0].alt, mediapath: recipe.images[0].mediapath }]
+				? [{ alt: recipe.images[0].alt, mediapath: recipe.images[0].mediapath, color: recipe.images[0].color }]
 				: [],
 			tags: recipe.translations.en.tags || [],
 			category: recipe.translations.en.category,
@@ -51,7 +51,7 @@ export function toBrief(recipe: any, recipeLang: string): BriefRecipeType {
 	return {
 		...recipe,
 		images: recipe.images?.[0]
-			? [{ alt: recipe.images[0].alt, mediapath: recipe.images[0].mediapath }]
+			? [{ alt: recipe.images[0].alt, mediapath: recipe.images[0].mediapath, color: recipe.images[0].color }]
 			: [],
 	} as BriefRecipeType;
 }
--- a/src/models/Recipe.ts
+++ b/src/models/Recipe.ts
@@ -12,6 +12,7 @@ const RecipeSchema = new mongoose.Schema(
 	    mediapath: {type: String, required: true}, // filename with hash for cache busting: e.g., "maccaroni.a1b2c3d4.webp"
 	    alt: String,
 	    caption: String,
+	    color: String, // dominant color hex e.g. "#a1b2c3", used as loading placeholder
    }],
    description: {type: String, required: true},
    note: {type: String},
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -37,6 +37,9 @@
 	const heroImg = $derived(
 		heroRecipe ? heroRecipe.images[0].mediapath : ''
 	);
+	const heroColor = $derived(
+		heroRecipe ? (heroRecipe.images[0].color || '') : ''
+	);

 	// Category chip state: 'all', 'season', or a category name
 	let activeChip = $state('all');
@@ -343,7 +346,7 @@

 {#if heroRecipe}
 	<section class="hero-section">
-		<figure class="hero">
+		<figure class="hero" style:background-color={heroColor}>
 			<img
 				class="hero-img"
 				src="https://bocken.org/static/rezepte/full/{heroImg}"
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -40,7 +40,7 @@
 		`${data.germanShortName || data.short_name}.webp`
 	);
 	const hero_img_src = $derived("https://bocken.org/static/rezepte/full/" + img_filename);
-	const placeholder_src = $derived("https://bocken.org/static/rezepte/placeholder/" + img_filename);
+	const img_color = $derived(data.images?.[0]?.color || '');

 	// Get alt text from images array
 	const img_alt = $derived(data.images?.[0]?.alt || '');
@@ -299,7 +299,7 @@ h2{
 	<link rel="alternate" hreflang="x-default" href="https://bocken.org/rezepte/{data.germanShortName}" />
 </svelte:head>

-<TitleImgParallax src={hero_img_src} {placeholder_src} alt={img_alt}>
+<TitleImgParallax src={hero_img_src} color={img_color} alt={img_alt}>
 	<div class=title>
 		{#if data.category}
 			<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
--- a/src/routes/[recipeLang=recipeLang]/add/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.server.ts
@@ -69,7 +69,7 @@ export const actions = {
 				try {
 					console.log('[RecipeAdd] Starting image processing...');
 					// Process and save the image
-					const { filename } = await processAndSaveRecipeImage(
+					const { filename, color } = await processAndSaveRecipeImage(
 						recipeImage,
 						recipeData.short_name,
 						IMAGE_DIR
@@ -79,7 +79,8 @@ export const actions = {
 					recipeData.images = [{
 						mediapath: filename,
 						alt: '',
-						caption: ''
+						caption: '',
+						color
 					}];
 				} catch (imageError: any) {
 					console.error('[RecipeAdd] Image processing error:', imageError);
--- a/src/routes/[recipeLang=recipeLang]/admin/image-colors/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/admin/image-colors/+page.server.ts
@@ -0,0 +1,19 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, url }) => {
+	const session = await locals.auth();
+
+	if (!session?.user?.nickname) {
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
+	}
+
+	if (!session.user.groups?.includes('rezepte_users')) {
+		throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
+	}
+
+	return {
+		user: session.user
+	};
+};
--- a/src/routes/[recipeLang=recipeLang]/admin/image-colors/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/admin/image-colors/+page.svelte
@@ -0,0 +1,243 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let stats = $state({
+		totalWithImages: 0,
+		missingColor: 0,
+		withColor: 0,
+	});
+
+	let processing = $state(false);
+	let filter = $state('missing');
+	let limit = $state(50);
+	let results = $state([]);
+	let errorMsg = $state('');
+
+	onMount(async () => {
+		await fetchStats();
+	});
+
+	async function fetchStats() {
+		try {
+			const response = await fetch('/api/recalculate-image-colors');
+			if (response.ok) {
+				stats = await response.json();
+			}
+		} catch (err) {
+			console.error('Failed to fetch stats:', err);
+		}
+	}
+
+	async function processBatch() {
+		processing = true;
+		errorMsg = '';
+		results = [];
+
+		try {
+			const response = await fetch('/api/recalculate-image-colors', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ filter, limit }),
+			});
+
+			const data = await response.json();
+
+			if (!response.ok) {
+				throw new Error(data.message || 'Failed to process batch');
+			}
+
+			results = data.results || [];
+			await fetchStats();
+		} catch (err) {
+			errorMsg = err instanceof Error ? err.message : 'An error occurred';
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+<style>
+	.container {
+		max-width: 1200px;
+		margin: 2rem auto;
+		padding: 2rem;
+	}
+	h1 {
+		color: var(--nord0);
+		margin-bottom: 2rem;
+	}
+	@media (prefers-color-scheme: dark) {
+		h1 { color: white; }
+	}
+	.stats {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: 1rem;
+		margin-bottom: 2rem;
+	}
+	.stat-card {
+		padding: 1.5rem;
+		background-color: var(--nord6);
+		border-radius: 0.5rem;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+	@media (prefers-color-scheme: dark) {
+		.stat-card { background-color: var(--nord0); }
+	}
+	.stat-label {
+		font-size: 0.9rem;
+		color: var(--nord3);
+		margin-bottom: 0.5rem;
+	}
+	.stat-value {
+		font-size: 2rem;
+		font-weight: bold;
+		color: var(--nord10);
+	}
+	.controls {
+		background-color: var(--nord6);
+		padding: 1.5rem;
+		border-radius: 0.5rem;
+		margin-bottom: 2rem;
+	}
+	@media (prefers-color-scheme: dark) {
+		.controls { background-color: var(--nord1); }
+	}
+	.control-group {
+		margin-bottom: 1rem;
+	}
+	label {
+		display: block;
+		margin-bottom: 0.5rem;
+		font-weight: bold;
+	}
+	select, input {
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid var(--nord4);
+		background-color: white;
+	}
+	@media (prefers-color-scheme: dark) {
+		select, input {
+			background-color: var(--nord0);
+			color: white;
+			border-color: var(--nord2);
+		}
+	}
+	button {
+		padding: 0.75rem 1.5rem;
+		background-color: var(--nord8);
+		color: white;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		font-size: 1rem;
+		font-weight: bold;
+		transition: background-color 0.2s;
+	}
+	button:hover { background-color: var(--nord7); }
+	button:disabled {
+		background-color: var(--nord3);
+		cursor: not-allowed;
+	}
+	.results {
+		margin-top: 2rem;
+	}
+	.result-item {
+		padding: 1rem;
+		background-color: var(--nord6);
+		border-radius: 0.25rem;
+		margin-bottom: 0.5rem;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+	@media (prefers-color-scheme: dark) {
+		.result-item { background-color: var(--nord1); }
+	}
+	.color-swatch {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid var(--nord4);
+		flex-shrink: 0;
+	}
+	.result-info {
+		flex: 1;
+	}
+	.result-error {
+		color: var(--nord11);
+		font-size: 0.85rem;
+	}
+	.error {
+		padding: 1rem;
+		background-color: var(--nord11);
+		color: white;
+		border-radius: 0.25rem;
+		margin-bottom: 1rem;
+	}
+</style>
+
+<div class="container">
+	<h1>Image Dominant Colors</h1>
+
+	<div class="stats">
+		<div class="stat-card">
+			<div class="stat-label">Recipes with Images</div>
+			<div class="stat-value">{stats.totalWithImages}</div>
+		</div>
+		<div class="stat-card">
+			<div class="stat-label">Missing Color</div>
+			<div class="stat-value">{stats.missingColor}</div>
+		</div>
+		<div class="stat-card">
+			<div class="stat-label">With Color</div>
+			<div class="stat-value">{stats.withColor}</div>
+		</div>
+	</div>
+
+	<div class="controls">
+		<div class="control-group">
+			<label for="filter">Filter:</label>
+			<select id="filter" bind:value={filter}>
+				<option value="missing">Only Missing Colors</option>
+				<option value="all">All Recipes (Recalculate)</option>
+			</select>
+		</div>
+
+		<div class="control-group">
+			<label for="limit">Batch Size:</label>
+			<input id="limit" type="number" bind:value={limit} min="1" max="500" />
+		</div>
+
+		<button onclick={processBatch} disabled={processing}>
+			{processing ? 'Processing...' : 'Extract Colors'}
+		</button>
+	</div>
+
+	{#if errorMsg}
+		<div class="error">{errorMsg}</div>
+	{/if}
+
+	{#if results.length > 0}
+		<div class="results">
+			<h2>Results ({results.filter(r => r.status === 'ok').length} ok, {results.filter(r => r.status === 'error').length} failed)</h2>
+			{#each results as result}
+				<div class="result-item">
+					{#if result.status === 'ok'}
+						<div class="color-swatch" style="background-color: {result.color}"></div>
+					{/if}
+					<div class="result-info">
+						<strong>{result.name}</strong> ({result.shortName})
+						{#if result.status === 'ok'}
+							<code>{result.color}</code>
+						{/if}
+						{#if result.status === 'error'}
+							<div class="result-error">{result.error}</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
--- a/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
@@ -25,6 +25,14 @@
 				: 'Alternativtext für Rezeptbilder mit KI generieren',
 			href: `/${data.recipeLang}/admin/alt-text-generator`,
 			icon: '🖼️'
+		},
+		{
+			title: isEnglish ? 'Image Colors' : 'Bildfarben',
+			description: isEnglish
+				? 'Extract dominant colors from recipe images for loading placeholders'
+				: 'Dominante Farben aus Rezeptbildern für Ladeplatzhalter extrahieren',
+			href: `/${data.recipeLang}/admin/image-colors`,
+			icon: '🎨'
 		}
 	];
 </script>
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts
@@ -22,7 +22,7 @@ import {
 async function deleteRecipeImage(filename: string): Promise<void> {
 	if (!filename) return;

-	const imageDirectories = ['full', 'thumb', 'placeholder'];
+	const imageDirectories = ['full', 'thumb'];

 	// Extract basename to handle both hashed and unhashed versions
 	const basename = filename
@@ -119,7 +119,7 @@ export const actions = {
 			if (recipeImage && recipeImage.size > 0) {
 				try {
 					// Process and save the new image
-					const { filename } = await processAndSaveRecipeImage(
+					const { filename, color } = await processAndSaveRecipeImage(
 						recipeImage,
 						recipeData.short_name,
 						IMAGE_DIR
@@ -133,7 +133,8 @@ export const actions = {
 					recipeData.images = [{
 						mediapath: filename,
 						alt: existingImagePath ? (recipeData.images?.[0]?.alt || '') : '',
-						caption: existingImagePath ? (recipeData.images?.[0]?.caption || '') : ''
+						caption: existingImagePath ? (recipeData.images?.[0]?.caption || '') : '',
+						color
 					}];
 				} catch (imageError: any) {
 					console.error('Image processing error:', imageError);
@@ -161,7 +162,7 @@ export const actions = {

 			// Handle short_name change (rename images)
 			if (originalShortName !== recipeData.short_name) {
-				const imageDirectories = ['full', 'thumb', 'placeholder'];
+				const imageDirectories = ['full', 'thumb'];

 				for (const dir of imageDirectories) {
 					const oldPath = join(IMAGE_DIR, 'rezepte', dir, `${originalShortName}.webp`);
--- a/src/routes/api/[recipeLang=recipeLang]/edit/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/edit/+server.ts
@@ -26,7 +26,7 @@ export const POST: RequestHandler = async ({request, locals}) => {

 	if (oldShortName !== newShortName) {
 		// Rename image files in all three directories
-		const imageDirectories = ['full', 'thumb', 'placeholder'];
+		const imageDirectories = ['full', 'thumb'];
 		const staticPath = join(process.cwd(), 'static', 'rezepte');

 		for (const dir of imageDirectories) {
--- a/src/routes/api/[recipeLang=recipeLang]/img/add/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/img/add/+server.ts
@@ -5,6 +5,7 @@ import { IMAGE_DIR } from '$env/static/private';
 import sharp from 'sharp';
 import { generateImageHashFromBuffer, getHashedFilename } from '$utils/imageHash';
 import { validateImageFile } from '$utils/imageValidation';
+import { extractDominantColor } from '$utils/imageProcessing';

 /**
 * Secure image upload endpoint for recipe images
@@ -13,7 +14,7 @@ import { validateImageFile } from '$utils/imageValidation';
 * - Requires authentication
 * - 5-layer validation (size, magic bytes, MIME, extension, Sharp)
 * - Uses FormData instead of base64 JSON (more efficient, more secure)
- * - Generates full/thumb/placeholder versions
+ * - Generates full/thumb versions + dominant color extraction
 * - Content hash for cache busting
 *
 * @route POST /api/rezepte/img/add
@@ -109,31 +110,20 @@ export const POST = (async ({ request, locals }) => {

 		await sharp(thumbBuffer).toFile(thumbHashedPath);
 		await sharp(thumbBuffer).toFile(thumbUnhashedPath);
-		console.log('[API:ImgAdd] Thumbnail images saved ✓');
+		console.log('[API:ImgAdd] Thumbnail images saved');

-		// Save placeholder (20px width) - both hashed and unhashed versions
-		console.log('[API:ImgAdd] Processing placeholder...');
-		const placeholderBuffer = await sharp(buffer)
-			.resize({ width: 20 })
-			.toFormat('webp')
-			.webp({ quality: 60 })
-			.toBuffer();
-		console.log('[API:ImgAdd] Placeholder buffer created, size:', placeholderBuffer.length, 'bytes');
+		// Extract dominant color
+		console.log('[API:ImgAdd] Extracting dominant color...');
+		const color = await extractDominantColor(buffer);
+		console.log('[API:ImgAdd] Dominant color:', color);

-		const placeholderHashedPath = path.join(IMAGE_DIR, 'rezepte', 'placeholder', hashedFilename);
-		const placeholderUnhashedPath = path.join(IMAGE_DIR, 'rezepte', 'placeholder', unhashedFilename);
-		console.log('[API:ImgAdd] Saving placeholder to:', { placeholderHashedPath, placeholderUnhashedPath });
-
-		await sharp(placeholderBuffer).toFile(placeholderHashedPath);
-		await sharp(placeholderBuffer).toFile(placeholderUnhashedPath);
-		console.log('[API:ImgAdd] Placeholder images saved ✓');
-
-		console.log('[API:ImgAdd] Upload completed successfully ✓');
+		console.log('[API:ImgAdd] Upload completed successfully');
 		return json({
 			success: true,
 			msg: 'Image uploaded successfully',
 			filename: hashedFilename,
-			unhashedFilename: unhashedFilename
+			unhashedFilename: unhashedFilename,
+			color
 		});
 	} catch (err: any) {
 		// Re-throw errors that already have status codes
--- a/src/routes/api/[recipeLang=recipeLang]/img/delete/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/img/delete/+server.ts
@@ -17,7 +17,7 @@ export const POST =  (async ({ request, locals})  => {
 	const basename = data.name || hashedFilename.replace(/\.[a-f0-9]{8}\.webp$/, '').replace(/\.webp$/, '');
 	const unhashedFilename = basename + '.webp';

-	[ "full", "thumb", "placeholder"].forEach((folder) => {
+	[ "full", "thumb"].forEach((folder) => {
 		// Delete hashed version
 		unlink(path.join(IMAGE_DIR, "rezepte", folder, hashedFilename), (e) => {
 			if(e) console.warn(`Could not delete hashed: ${folder}/${hashedFilename}`, e);
--- a/src/routes/api/[recipeLang=recipeLang]/img/mv/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/img/mv/+server.ts
@@ -26,7 +26,7 @@ export const POST =  (async ({ request, locals})  => {
 		newFilename = data.new_name + ".webp";
 	}

-	[ "full", "thumb", "placeholder"].forEach((folder) => {
+	[ "full", "thumb"].forEach((folder) => {
 		const old_path = path.join(IMAGE_DIR, "rezepte", folder, oldFilename)
 		rename(old_path, path.join(IMAGE_DIR, "rezepte", folder, newFilename), (e) => {
 		console.log(e)
--- a/src/routes/api/[recipeLang=recipeLang]/items/[name]/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/items/[name]/+server.ts
@@ -142,6 +142,7 @@ export const GET: RequestHandler = async ({ params }) => {
        mediapath: img.mediapath,
        alt: translatedImages[index]?.alt || img.alt || '',
        caption: translatedImages[index]?.caption || img.caption || '',
+        color: img.color || '',
      }));
    }

--- a/src/routes/api/recalculate-image-colors/+server.ts
+++ b/src/routes/api/recalculate-image-colors/+server.ts
@@ -0,0 +1,159 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { Recipe } from '$models/Recipe.js';
+import { IMAGE_DIR } from '$env/static/private';
+import { extractDominantColor } from '$utils/imageProcessing';
+import { join } from 'path';
+import { access, constants } from 'fs/promises';
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const session = await locals.auth();
+	if (!session?.user) {
+		throw error(401, 'Unauthorized');
+	}
+
+	try {
+		const body = await request.json();
+		const { filter = 'missing', limit = 50 } = body;
+
+		let query: any = { images: { $exists: true, $ne: [] } };
+
+		if (filter === 'missing') {
+			query = {
+				images: {
+					$elemMatch: {
+						mediapath: { $exists: true },
+						$or: [{ color: { $exists: false } }, { color: '' }],
+					},
+				},
+			};
+		}
+
+		const recipes = await Recipe.find(query).limit(limit);
+
+		if (recipes.length === 0) {
+			return json({
+				success: true,
+				processed: 0,
+				message: 'No recipes found matching criteria',
+			});
+		}
+
+		const results: Array<{
+			shortName: string;
+			name: string;
+			color: string;
+			status: 'ok' | 'error';
+			error?: string;
+		}> = [];
+
+		for (const recipe of recipes) {
+			const image = recipe.images[0];
+			if (!image?.mediapath) continue;
+
+			// Try unhashed filename first (always exists), fall back to hashed
+			const basename = image.mediapath
+				.replace(/\.[a-f0-9]{8}\.webp$/, '')
+				.replace(/\.webp$/, '');
+			const unhashedFilename = basename + '.webp';
+
+			const candidates = [
+				join(IMAGE_DIR, 'rezepte', 'full', unhashedFilename),
+				join(IMAGE_DIR, 'rezepte', 'full', image.mediapath),
+				join(IMAGE_DIR, 'rezepte', 'thumb', unhashedFilename),
+				join(IMAGE_DIR, 'rezepte', 'thumb', image.mediapath),
+			];
+
+			let imagePath: string | null = null;
+			for (const candidate of candidates) {
+				try {
+					await access(candidate, constants.R_OK);
+					imagePath = candidate;
+					break;
+				} catch {
+					// try next
+				}
+			}
+
+			if (!imagePath) {
+				results.push({
+					shortName: recipe.short_name,
+					name: recipe.name,
+					color: '',
+					status: 'error',
+					error: 'Image file not found on disk',
+				});
+				continue;
+			}
+
+			try {
+				const color = await extractDominantColor(imagePath);
+				recipe.images[0].color = color;
+				await recipe.save();
+
+				results.push({
+					shortName: recipe.short_name,
+					name: recipe.name,
+					color,
+					status: 'ok',
+				});
+			} catch (err) {
+				console.error(`Failed to extract color for ${recipe.short_name}:`, err);
+				results.push({
+					shortName: recipe.short_name,
+					name: recipe.name,
+					color: '',
+					status: 'error',
+					error: err instanceof Error ? err.message : 'Unknown error',
+				});
+			}
+		}
+
+		return json({
+			success: true,
+			processed: results.filter(r => r.status === 'ok').length,
+			failed: results.filter(r => r.status === 'error').length,
+			results,
+		});
+	} catch (err) {
+		console.error('Error in bulk color recalculation:', err);
+
+		if (err instanceof Error && 'status' in err) {
+			throw err;
+		}
+
+		throw error(500, err instanceof Error ? err.message : 'Failed to recalculate colors');
+	}
+};
+
+export const GET: RequestHandler = async ({ locals }) => {
+	const session = await locals.auth();
+	if (!session?.user) {
+		throw error(401, 'Unauthorized');
+	}
+
+	try {
+		const totalWithImages = await Recipe.countDocuments({
+			images: { $exists: true, $ne: [] },
+		});
+
+		const missingColor = await Recipe.countDocuments({
+			images: {
+				$elemMatch: {
+					mediapath: { $exists: true },
+					$or: [{ color: { $exists: false } }, { color: '' }],
+				},
+			},
+		});
+
+		const withColor = totalWithImages - missingColor;
+
+		return json({
+			totalWithImages,
+			missingColor,
+			withColor,
+		});
+	} catch (err) {
+		throw error(500, 'Failed to fetch statistics');
+	}
+};
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -113,10 +113,10 @@ sw.addEventListener('fetch', (event) => {
 		return;
 	}

-	// Handle recipe images (thumbnails, full images, and placeholders)
+	// Handle recipe images (thumbnails and full images)
 	if (
 		url.pathname.startsWith('/static/rezepte/') &&
-		(url.pathname.includes('/thumb/') || url.pathname.includes('/full/') || url.pathname.includes('/placeholder/'))
+		(url.pathname.includes('/thumb/') || url.pathname.includes('/full/'))
 	) {
 		event.respondWith(
 			(async () => {
@@ -137,8 +137,8 @@ sw.addEventListener('fetch', (event) => {
 					}
 					return response;
 				} catch {
-					// Network failed - try to serve thumbnail as fallback for full/placeholder
-					if (url.pathname.includes('/full/') || url.pathname.includes('/placeholder/')) {
+					// Network failed - try to serve thumbnail as fallback for full
+					if (url.pathname.includes('/full/')) {
 						// Extract filename and try to find cached thumbnail
 						const filename = url.pathname.split('/').pop();
 						if (filename) {
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -123,7 +123,8 @@ export type RecipeModelType = {
  images?: [{
 	  mediapath: string;
 	  alt: string;
-	  caption?: string
+	  caption?: string;
+	  color?: string;
  }];
  description: string;
  tags: [string];
@@ -164,6 +165,7 @@ export type BriefRecipeType = {
 		mediapath: string;
 		alt: string;
 		caption?: string;
+		color?: string;
 	}]
 	description: string;
 	tags: [string];
--- a/src/utils/imageProcessing.ts
+++ b/src/utils/imageProcessing.ts
@@ -3,18 +3,107 @@ import sharp from 'sharp';
 import { generateImageHashFromBuffer, getHashedFilename } from '$utils/imageHash';
 import { validateImageFile } from '$utils/imageValidation';

+// --- sRGB <-> linear RGB <-> OKLAB color conversions ---
+
+function srgbToLinear(c: number): number {
+	return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function linearToSrgb(c: number): number {
+	return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+function linearRgbToOklab(r: number, g: number, b: number): [number, number, number] {
+	const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+	const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+	const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+	const l = Math.cbrt(l_);
+	const m = Math.cbrt(m_);
+	const s = Math.cbrt(s_);
+	return [
+		0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+		1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+		0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+	];
+}
+
+function oklabToLinearRgb(L: number, a: number, b: number): [number, number, number] {
+	const l = L + 0.3963377774 * a + 0.2158037573 * b;
+	const m = L - 0.1055613458 * a - 0.0638541728 * b;
+	const s = L - 0.0894841775 * a - 1.2914855480 * b;
+	const l3 = l * l * l;
+	const m3 = m * m * m;
+	const s3 = s * s * s;
+	return [
+		+4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3,
+		-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3,
+		-0.0041960863 * l3 - 0.7034186147 * m3 + 1.7076147010 * s3,
+	];
+}
+
 /**
- * Process and save recipe image with multiple versions (full, thumb, placeholder)
+ * Extract the perceptually dominant color from an image buffer.
+ * Averages pixels in OKLAB space with a 2D Gaussian kernel biased toward the center.
+ * Returns a hex string like "#a1b2c3".
+ */
+export async function extractDominantColor(input: Buffer | string): Promise<string> {
+	const { data, info } = await sharp(input)
+		.resize(50, 50, { fit: 'cover' })
+		.removeAlpha()
+		.raw()
+		.toBuffer({ resolveWithObject: true });
+
+	const { width, height } = info;
+	const cx = (width - 1) / 2;
+	const cy = (height - 1) / 2;
+	const sigmaX = 0.3 * width;
+	const sigmaY = 0.3 * height;
+
+	let wL = 0, wa = 0, wb = 0, wSum = 0;
+
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const i = (y * width + x) * 3;
+			// Gaussian weight based on distance from center
+			const dx = x - cx;
+			const dy = y - cy;
+			const w = Math.exp(-0.5 * ((dx * dx) / (sigmaX * sigmaX) + (dy * dy) / (sigmaY * sigmaY)));
+
+			// sRGB [0-255] -> linear [0-1] -> OKLAB
+			const lr = srgbToLinear(data[i] / 255);
+			const lg = srgbToLinear(data[i + 1] / 255);
+			const lb = srgbToLinear(data[i + 2] / 255);
+			const [L, a, b] = linearRgbToOklab(lr, lg, lb);
+
+			wL += w * L;
+			wa += w * a;
+			wb += w * b;
+			wSum += w;
+		}
+	}
+
+	// Average in OKLAB, convert back to sRGB
+	const [rLin, gLin, bLin] = oklabToLinearRgb(wL / wSum, wa / wSum, wb / wSum);
+	const r = Math.round(Math.min(1, Math.max(0, linearToSrgb(rLin))) * 255);
+	const g = Math.round(Math.min(1, Math.max(0, linearToSrgb(gLin))) * 255);
+	const b = Math.round(Math.min(1, Math.max(0, linearToSrgb(bLin))) * 255);
+
+	return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
+}
+
+/**
+ * Process and save recipe image with multiple versions (full, thumb)
+ * and extract dominant color.
 * @param file - The image File object
 * @param name - The base name for the image (usually recipe short_name)
 * @param imageDir - The base directory where images are stored
- * @returns Object with hashedFilename and unhashedFilename
+ * @returns Object with hashedFilename, unhashedFilename, and dominant color
 */
 export async function processAndSaveRecipeImage(
 	file: File,
 	name: string,
 	imageDir: string
-): Promise<{ filename: string; unhashedFilename: string }> {
+): Promise<{ filename: string; unhashedFilename: string; color: string }> {
 	console.log('[ImageProcessing] Starting image processing for:', {
 		fileName: file.name,
 		recipeName: name,
@@ -58,7 +147,7 @@ export async function processAndSaveRecipeImage(

 	await sharp(fullBuffer).toFile(fullHashedPath);
 	await sharp(fullBuffer).toFile(fullUnhashedPath);
-	console.log('[ImageProcessing] Full size images saved ✓');
+	console.log('[ImageProcessing] Full size images saved');

 	// Save thumbnail (800px width) - both hashed and unhashed versions
 	console.log('[ImageProcessing] Generating thumbnail (800px)...');
@@ -75,28 +164,17 @@ export async function processAndSaveRecipeImage(

 	await sharp(thumbBuffer).toFile(thumbHashedPath);
 	await sharp(thumbBuffer).toFile(thumbUnhashedPath);
-	console.log('[ImageProcessing] Thumbnail images saved ✓');
+	console.log('[ImageProcessing] Thumbnail images saved');

-	// Save placeholder (20px width) - both hashed and unhashed versions
-	console.log('[ImageProcessing] Generating placeholder (20px)...');
-	const placeholderBuffer = await sharp(buffer)
-		.resize({ width: 20 })
-		.toFormat('webp')
-		.webp({ quality: 60 })
-		.toBuffer();
-	console.log('[ImageProcessing] Placeholder buffer created, size:', placeholderBuffer.length, 'bytes');
+	// Extract dominant color
+	console.log('[ImageProcessing] Extracting dominant color...');
+	const color = await extractDominantColor(buffer);
+	console.log('[ImageProcessing] Dominant color:', color);

-	const placeholderHashedPath = path.join(imageDir, 'rezepte', 'placeholder', hashedFilename);
-	const placeholderUnhashedPath = path.join(imageDir, 'rezepte', 'placeholder', unhashedFilename);
-	console.log('[ImageProcessing] Saving placeholder to:', { placeholderHashedPath, placeholderUnhashedPath });
-
-	await sharp(placeholderBuffer).toFile(placeholderHashedPath);
-	await sharp(placeholderBuffer).toFile(placeholderUnhashedPath);
-	console.log('[ImageProcessing] Placeholder images saved ✓');
-
-	console.log('[ImageProcessing] All image versions processed and saved successfully ✓');
+	console.log('[ImageProcessing] All image versions processed and saved successfully');
 	return {
 		filename: hashedFilename,
-		unhashedFilename: unhashedFilename
+		unhashedFilename: unhashedFilename,
+		color
 	};
 }