pnger/ROADMAP.md

# PNGer Feature Roadmap

## Current Features ✅

- ✅ Basic image upload (file picker)
- ✅ Width/height resizing
- ✅ Aspect ratio control (inside/cover)
- ✅ Crop positioning (9 positions)
- ✅ Format conversion (PNG, WebP, JPEG)
- ✅ Quality adjustment (10-100)
- ✅ Direct download (no server storage)
- ✅ Docker deployment
- ✅ **Live Preview** - Real-time side-by-side comparison with file size analysis
- ✅ **Dark/Light Mode** - Theme toggle for better PNG transparency inspection
- ✅ **Modern UI** - Sleek design with smooth transitions and visual feedback

---

## Phase 1: Enhanced User Experience (Priority: HIGH)

### 1.1 Live Preview 🎯 ✅ **COMPLETED**
**Why**: Immediate visual feedback dramatically improves UX
**Effort**: Medium | **Impact**: High

- [x] Real-time preview of transformations before download
- [x] Side-by-side comparison (original vs transformed)
- [x] Show file size reduction/increase
- [x] Display actual dimensions of output
- [x] Preview updates on parameter change (debounced)
- [x] Dark/light mode for transparency inspection

**Technical approach:**
- ✅ Client-side preview using Canvas API for instant feedback
- ✅ Debounced updates (300ms) for smooth performance
- ✅ Base64 size estimation with color-coded savings indicator

### 1.2 Drag & Drop Interface 🎯 **NEXT PRIORITY**
**Why**: More intuitive than file picker
**Effort**: Low | **Impact**: Medium

- [ ] Drag & drop zone for image upload
- [ ] Visual feedback on drag over
- [ ] Support multiple files (batch processing)
- [ ] Show thumbnail of uploaded image
- [ ] Paste from clipboard support (Ctrl+V)

**Implementation notes:**
- Add drop zone with dashed border styling
- Listen for `dragover`, `dragleave`, `drop` events
- Extract files from `dataTransfer.files`
- Add paste event listener for clipboard images

### 1.3 Batch Processing
**Why**: Process multiple images at once
**Effort**: Medium | **Impact**: High

- [ ] Upload multiple images
- [ ] Apply same transformations to all
- [ ] Download as ZIP file
- [ ] Progress indicator for batch operations
- [ ] Individual vs global settings per image

---

## Phase 2: Advanced Image Operations (Priority: MEDIUM-HIGH)

### 2.1 Smart Presets 🎯 **HIGH VALUE**
**Why**: Common use cases made easy
**Effort**: Low | **Impact**: High

- [ ] **Web Thumbnail** (300x300, WebP, 75% quality)
- [ ] **Social Media** (1200x630 for OG images)
- [ ] **Profile Picture** (square crop, various sizes)
- [ ] **Email Friendly** (max 1MB, optimized)
- [ ] **Retina Display** (@2x, @3x multipliers)
- [ ] **Icon Set** (16, 32, 64, 128, 256px)
- [ ] Custom preset saving

**Implementation notes:**
- Add preset dropdown in UI
- Store presets as JSON configs
- Quick-apply button for each preset
- LocalStorage for custom user presets

### 2.2 Image Optimization
**Why**: Reduce file size without quality loss
**Effort**: Low | **Impact**: High

- [ ] **Auto-optimize** button (best compression/quality ratio)
- [ ] Lossless PNG optimization
- [ ] Strip EXIF metadata (privacy + size)
- [ ] Progressive JPEG encoding
- [ ] Show compression statistics

### 2.3 Additional Transformations
**Why**: More creative control
**Effort**: Medium | **Impact**: Medium

- [ ] Rotation (90°, 180°, 270°, custom)
- [ ] Flip (horizontal/vertical)
- [ ] Grayscale conversion
- [ ] Blur effect (with intensity)
- [ ] Sharpen filter
- [ ] Brightness/contrast adjustment
- [ ] Border/padding addition

---

## Phase 3: Utilitarian Power Features (Priority: MEDIUM)

### 3.1 Image Analysis
**Why**: Understand your images
**Effort**: Low | **Impact**: Medium

- [ ] Display image metadata (dimensions, format, color space)
- [ ] File size analysis (before/after)
- [ ] Color palette extraction
- [ ] Dominant color detection
- [ ] Transparency detection
- [ ] Aspect ratio calculator

### 3.2 Custom Crop Tool
**Why**: Precise control over cropping
**Effort**: High | **Impact**: Medium

- [ ] Visual crop selector (drag handles)
- [ ] Aspect ratio lock
- [ ] Freeform cropping
- [ ] Rule of thirds grid overlay
- [ ] Zoom for precision

### 3.3 Watermarking
**Why**: Brand/protect images
**Effort**: Medium | **Impact**: Medium

- [ ] Text watermark with custom font
- [ ] Image watermark overlay
- [ ] Position control (9 positions + custom)
- [ ] Opacity adjustment
- [ ] Repeat pattern option

### 3.4 Image Comparison Tool
**Why**: A/B test different settings
**Effort**: Medium | **Impact**: Low-Medium

- [ ] Compare 2-4 versions side-by-side
- [ ] Slider to reveal differences
- [ ] Quality vs file size comparison
- [ ] Export comparison settings

---

## Phase 4: Workflow & Automation (Priority: LOW-MEDIUM)

### 4.1 API Access
**Why**: Integrate with other tools
**Effort**: Low | **Impact**: Medium

- [ ] Generate API keys in UI
- [ ] Rate limiting per key
- [ ] Usage statistics dashboard
- [ ] Webhook support for async processing
- [ ] OpenAPI/Swagger documentation

### 4.2 Templates & Workflows
**Why**: Reusable transformation pipelines
**Effort**: Medium | **Impact**: Medium

- [ ] Save transformation pipelines
- [ ] Chain multiple operations
- [ ] Share templates via URL
- [ ] Import/export templates (JSON)
- [ ] Community template gallery

### 4.3 History & Favorites
**Why**: Quick access to common tasks
**Effort**: Low | **Impact**: Low

- [ ] Recent transformations (local storage)
- [ ] Favorite presets
- [ ] Quick re-apply last settings
- [ ] Clear history button

---

## Phase 5: Extended Format Support (Priority: LOW)

### 5.1 More Input Formats
**Effort**: Low-Medium | **Impact**: Medium

- [ ] AVIF support (next-gen format)
- [ ] TIFF support
- [ ] SVG to raster conversion
- [ ] ICO (favicon) generation
- [ ] PDF to image (first page)
- [ ] GIF frame extraction

### 5.2 Advanced Output Options
**Effort**: Medium | **Impact**: Low

- [ ] Multi-size export (responsive images)
- [ ] Generate `<picture>` tag HTML
- [ ] Create image sprites
- [ ] Generate CSS for backgrounds

---

## Phase 6: Enterprise Features (Priority: LOW)

### 6.1 User Accounts (Optional)
**Why**: For managed deployments
**Effort**: High | **Impact**: Situational

- [ ] User authentication
- [ ] Per-user quotas
- [ ] Saved presets sync
- [ ] Usage analytics
- [ ] Team collaboration

### 6.2 Cloud Storage Integration
**Why**: Direct save to storage
**Effort**: High | **Impact**: Low-Medium

- [ ] S3/MinIO upload
- [ ] Cloudflare Images integration
- [ ] Google Drive export
- [ ] Dropbox integration

---

## Recommended Next Steps 🚀

### Sprint 1 (Week 1): Immediate UX Wins
**Focus**: Make the tool more intuitive and powerful

1. **Drag & Drop Upload** (Phase 1.2) - 2-3 hours
   - Drop zone with visual feedback
   - Clipboard paste support
   - Multiple file selection

2. **Smart Presets** (Phase 2.1) - 3-4 hours
   - 6-8 common presets (web, social, profile, etc.)
   - Quick-apply buttons
   - Custom preset saving

3. **Keyboard Shortcuts** - 1-2 hours
   - Ctrl+V to paste image
   - Enter to process
   - Ctrl+D to download
   - ? to show shortcuts help

**Total effort**: ~8-10 hours | **Impact**: Very High

### Sprint 2 (Week 2): Power User Features
**Focus**: Add functionality for advanced users

4. **Additional Transformations** (Phase 2.3) - 4-6 hours
   - Rotate, flip, grayscale
   - Sharpen, blur filters
   - Backend Sharp API extensions

5. **Image Analysis** (Phase 3.1) - 2-3 hours
   - Metadata display panel
   - Color palette extraction
   - Transparency detection

6. **Auto-Optimize** (Phase 2.2) - 2-3 hours
   - Smart quality detection
   - Format recommendation
   - One-click optimization

**Total effort**: ~10-12 hours | **Impact**: High

### Sprint 3 (Week 3+): Polish & Advanced
**Focus**: Batch processing and custom tools

7. **Batch Processing** (Phase 1.3) - 6-8 hours
   - Multiple file upload
   - Queue management
   - ZIP download

8. **Custom Crop Tool** (Phase 3.2) - 8-10 hours
   - Interactive crop overlay
   - Visual drag handles
   - Aspect ratio controls

---

## Quick Wins (Low Effort, High Impact) ⚡

### Immediate Improvements (< 2 hours each)
1. ✅ ~~**Live Preview**~~ - Phase 1.1 (COMPLETED)
2. 🎯 **Drag & Drop** - Phase 1.2 (START HERE!)
3. 🎯 **Smart Presets** - Phase 2.1
4. 🎯 **Keyboard Shortcuts** - UX Polish
5. 🎯 **Copy to Clipboard** - UX Polish
6. **Image Analysis** - Phase 3.1
7. **Auto-optimize** - Phase 2.2

### UX/UI Polish (1-3 hours each)
- [x] Dark mode support ✅
- [ ] Keyboard shortcuts (Ctrl+V paste, Enter to process)
- [ ] Copy image to clipboard
- [ ] Undo/redo support
- [ ] Mobile-responsive design improvements
- [ ] Toast notifications for actions
- [ ] Image format auto-detection suggestions
- [ ] Loading progress bars instead of spinners

---

## Technical Debt & Infrastructure

### Code Quality
- [ ] Add unit tests (backend)
- [ ] Add E2E tests (Playwright)
- [ ] TypeScript strict mode
- [ ] ESLint + Prettier configuration
- [ ] CI/CD pipeline (GitHub Actions or Gitea Actions)
- [ ] Code coverage reporting

### Performance
- [ ] Image processing queue (for heavy operations)
- [ ] Redis caching for repeated transforms
- [ ] CDN integration
- [ ] WebP/AVIF auto-detection based on browser support
- [ ] Lazy loading for UI components
- [ ] Service worker for offline support

### Security
- [ ] Rate limiting (prevent abuse)
- [ ] File type validation (magic bytes check)
- [ ] Max file size enforcement (configurable)
- [ ] CORS configuration
- [ ] CSP headers
- [ ] Input sanitization audit

### Monitoring
- [ ] Prometheus metrics endpoint
- [ ] Error tracking (Sentry integration)
- [ ] Performance monitoring
- [ ] Usage analytics (privacy-focused)

---

## Community Ideas

Have suggestions? Open an issue on the repository:
- Feature requests
- Bug reports
- Use case discussions
- Performance improvements

**Maintainer**: jason  
**Repository**: https://git.alwisp.com/jason/pnger  
**Last Updated**: 2026-03-08