Files
pnger/ROADMAP.md

7.8 KiB

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