feat: image optimization with multiple sizes and lazy loading

- Generate thumbnail (150px), medium (800px), full size on upload
- OptimizedImage component with Intersection Observer lazy loading
- Blur placeholder while loading
- Fetches appropriate size based on props (thumbnail/medium/full)
- Async image loading reduces initial page load time
- Added medium and thumbnail columns to images table

src/lib/schema.ts

@@ -20,6 +20,8 @@ export async function initSchema() {
       id SERIAL PRIMARY KEY,
       filename VARCHAR(255) NOT NULL,
       data TEXT NOT NULL,
+      thumbnail TEXT,
+      medium TEXT,
       category VARCHAR(100) DEFAULT 'other',
       room_id INTEGER REFERENCES rooms(id) ON DELETE SET NULL,
       location_target VARCHAR(100) DEFAULT 'gallery',
@@ -27,6 +29,10 @@ export async function initSchema() {
     );
   `);
 
+  // Add columns if they don't exist (for existing databases)
+  await db.query(`ALTER TABLE images ADD COLUMN IF NOT EXISTS medium TEXT`);
+  await db.query(`ALTER TABLE images ADD COLUMN IF NOT EXISTS thumbnail TEXT`);
+
   await db.query(`
     CREATE TABLE IF NOT EXISTS reservations (
       id SERIAL PRIMARY KEY,