Fix: Add base64 placeholder for hero video and squash all massive photo assets down to max 1920px

scripts/generate-placeholders.ts

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+
+const PUBLIC_DIR = path.join(process.cwd(), 'public');
+const IMAGES_TO_PROCESS = [
+  '/assets/photos/DJI_0048.JPG',
+  '/assets/videos/web/hero-bahnkreuzung-poster.jpg',
+  '/assets/videos/web/hero-bohrung-poster.jpg',
+  '/assets/videos/web/hero-kabelpflug-poster.jpg',
+  '/assets/videos/web/hero-messe-poster.jpg',
+];
+
+async function generatePlaceholders() {
+  const placeholders: Record<string, string> = {};
+
+  for (const imagePath of IMAGES_TO_PROCESS) {
+    const fullPath = path.join(PUBLIC_DIR, imagePath);
+    if (!fs.existsSync(fullPath)) {
+      console.warn(`File not found: ${fullPath}`);
+      continue;
+    }
+
+    try {
+      const buffer = await sharp(fullPath)
+        .resize(10, 10, { fit: 'inside' })
+        .blur(2) // Adding slight blur
+        .webp({ quality: 20 })
+        .toBuffer();
+      
+      const base64 = `data:image/webp;base64,${buffer.toString('base64')}`;
+      placeholders[imagePath] = base64;
+      console.log(`Generated placeholder for ${imagePath}`);
+    } catch (e) {
+      console.error(`Failed to generate placeholder for ${imagePath}`, e);
+    }
+  }
+
+  const outputPath = path.join(process.cwd(), 'lib', 'placeholders.json');
+  fs.writeFileSync(outputPath, JSON.stringify(placeholders, null, 2));
+  console.log(`Saved placeholders to ${outputPath}`);
+}
+
+generatePlaceholders();