diff --git a/README.md b/README.md index 1492cd9..d68b9e4 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ A self-hosted image uploader with multi-image upload capabilities and automatic **Multi-Image Upload**: Upload multiple images at once with batch processing **Slideshow Mode**: Automatic fullscreen slideshow with smooth transitions +**Preview Image Optimization**: Automatic thumbnail generation for faster gallery loading (96-98% size reduction) **Persistent Storage**: Docker volumes ensure data persistence across restarts **Clean UI**: Minimalist design focused on user experience **Self-Hosted**: Complete control over your data and infrastructure @@ -106,6 +107,31 @@ docker compose up -d - **Spacebar / Arrow Right**: Manually advance to next image - **Home Button**: Return to main upload interface +### Preview Image Optimization + +The application automatically generates optimized preview thumbnails for all uploaded images to significantly improve gallery loading performance. + +- **Automatic Generation**: + - Preview images are created automatically on server startup + - Existing images without previews are processed on-demand + - New uploads generate previews immediately during upload + +- **Technical Specifications**: + - **Max Width**: 800px (maintains aspect ratio) + - **Format**: JPEG with 85% quality + - **Size Reduction**: 96-98% smaller than originals (e.g., 2076KB → 58.5KB) + - **Performance**: ~30x faster gallery loading times + +- **Smart Image Loading**: + - **Galleries & Overview**: Load lightweight preview images (~50-100KB) + - **Slideshow Mode**: Uses full-resolution originals for best quality + - **Fallback**: Automatically uses originals if preview generation fails + +- **Storage**: + - Originals: `backend/src/data/images/` (~2-4MB per image) + - Previews: `backend/src/data/previews/` (~50-100KB per image) + - Database: `preview_path` column stores preview filename + ### Moderation Interface (Protected) - **Access**: `http://localhost/moderation` (requires authentication) @@ -152,6 +178,7 @@ CREATE TABLE images ( file_name TEXT NOT NULL, original_name TEXT NOT NULL, file_path TEXT NOT NULL, + preview_path TEXT, upload_order INTEGER NOT NULL, file_size INTEGER, mime_type TEXT, @@ -175,7 +202,8 @@ CREATE TRIGGER update_groups_timestamp ### Backend (Node.js + Express) - **Multi-upload API**: `/api/upload/batch` - Handles batch file processing - **Groups API**: `/api/groups` - Retrieves slideshow collections -- **File Storage**: Organized in `/upload` directory +- **Preview Generation**: Automatic thumbnail creation using Sharp (800px JPEG, 85% quality) +- **File Storage**: Organized in `/upload` directory (originals) and `/data/previews` (thumbnails) - **Database Storage**: sqlite database in `/app/src/data/db/image_uploader.db` ### Frontend (React + Material-UI) @@ -195,12 +223,16 @@ Docker Volume (app-data) src └── app ├── src - ├── upload + ├── upload (originals, ~2-4MB each) │ ├── ZMmHXzHbqw.jpg │ ├── tjjnngOmXS.jpg │ └── ... └── data - └── db + ├── previews (thumbnails, ~50-100KB each) + │ ├── ZMmHXzHbqw.jpg + │ ├── tjjnngOmXS.jpg + │ └── ... + └── db └── image_uploader.db ``` @@ -229,7 +261,9 @@ src - `DELETE /groups/:id/images/:imageId` - Delete individual image from group ### File Access -- `GET /api/upload/:filename` - Access uploaded image files +- `GET /api/upload/:filename` - Access uploaded image files (legacy, use `/api/download` instead) +- `GET /api/download/:filename` - Download original full-resolution images +- `GET /api/previews/:filename` - Access optimized preview thumbnails (~100KB, 800px width) ## Configuration ### Environment Variables