# 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

---

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

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

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

**Technical approach:**
- Client-side preview using Canvas API for instant feedback
- Optional: Server preview endpoint for accurate Sharp rendering
- Show estimated vs actual file size

### 1.2 Drag & Drop Interface
**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

### 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
**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

### 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

---

## Quick Wins (Low Effort, High Impact)

### Immediate Improvements
1. ✅ **Live Preview** - Phase 1.1 (start here!)
2. ✅ **Smart Presets** - Phase 2.1
3. ✅ **Drag & Drop** - Phase 1.2
4. ✅ **Auto-optimize** - Phase 2.2
5. ✅ **Image Analysis** - Phase 3.1

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

---

## 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)

---

## Suggested Implementation Order

**Sprint 1 (Week 1-2): MVP Enhancements**
1. Live Preview (Phase 1.1) ⭐
2. Drag & Drop (Phase 1.2)
3. Image Analysis (Phase 3.1)
4. Smart Presets (Phase 2.1)

**Sprint 2 (Week 3-4): Power User Features**
5. Batch Processing (Phase 1.3)
6. Image Optimization (Phase 2.2)
7. Additional Transformations (Phase 2.3)
8. Keyboard shortcuts

**Sprint 3 (Week 5-6): Polish & Advanced**
9. Custom Crop Tool (Phase 3.2)
10. Watermarking (Phase 3.3)
11. API Access (Phase 4.1)
12. Testing & bug fixes

---

## 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