jason/pnger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c65355a43b94b5a4aeddaa12450167dcbd60d4e4
pnger/ROADMAP.md

14 KiB
Raw Blame History

PNGer Feature Roadmap

Completed Features ✅

Core Foundation

  • ✅ Basic image upload (file picker, drag & drop, clipboard paste)
  • ✅ 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

Sprint 1: Enhanced UX (Completed March 2026)

  • ✅ Drag & Drop Upload - Drag images directly into the app
  • ✅ Clipboard Paste - Paste with Ctrl+V (Cmd+V on Mac)
  • ✅ Smart Presets - 8 quick-access presets:
    • Web Optimized (1920x1080, 80%, WebP)
    • Social Media (1080x1080, 85%, JPEG)
    • Profile Picture (400x400, 90%, PNG)
    • Email Friendly (800x600, 75%, JPEG)
    • Tiny Icon (64x64, 100%, PNG)
    • Retina 2x (2x dimensions, 90%)
    • Icon Small (256x256, 95%, PNG)
    • Icon Large (512x512, 95%, PNG)
  • ✅ Keyboard Shortcuts - Fast workflow:
    • Ctrl+V / Cmd+V: Paste image
    • Enter: Transform & Download
    • Ctrl+Enter / Cmd+Enter: Transform & Download (anywhere)
    • ?: Show shortcuts help
    • Esc: Close dialogs
  • ✅ Enhanced Visual Feedback - Better loading states and error messages
  • ✅ Theme Contrast Fixes - Improved text visibility in both themes

Sprint 2: Batch Processing & Advanced Operations (Next Priority)

Focus: Handle multiple files and add essential image operations
Effort: ~12-15 hours | Impact: Very High | Timeline: Week 1-2

2.1 Batch Processing 🚀 HIGH VALUE

Why: Process multiple images at once - massive time saver for bulk operations
Effort: Medium (6-8 hours) | Impact: Very High

  • Upload multiple images (10+ files)
  • Apply same transformations to all
  • Individual preview for each image
  • Download as ZIP file
  • Progress indicator for batch operations
  • Cancel/remove individual files from queue
  • Batch rename with pattern (e.g., image-{index}.png)
  • Memory optimization for large batches

Implementation Notes:

  • Use JSZip library for ZIP creation
  • Process images in parallel (4-6 concurrent)
  • Track individual file progress
  • Client-side queue management

2.2 Essential Image Operations 🎨

Why: Basic operations users expect
Effort: Low-Medium (4-6 hours) | Impact: High

  • Rotation: 90°, 180°, 270°, custom angle
  • Flip: Horizontal / Vertical
  • Grayscale: Quick B&W conversion
  • Auto-rotate: Based on EXIF orientation
  • Trim: Remove transparent/white borders automatically

Technical: All supported natively by Sharp library

2.3 Image Optimization ⚡ HIGH VALUE

Why: One-click file size reduction without quality loss
Effort: Low (2-3 hours) | Impact: Very High

  • Auto-Optimize button - Smart quality/compression
  • Lossless PNG optimization (pngquant-style)
  • Strip EXIF metadata (privacy + file size)
  • Progressive JPEG encoding
  • Compression comparison - Show savings for each format
  • Target file size - Optimize to hit specific size (e.g., "under 1MB")

Implementation: Use Sharp's built-in optimization + custom quality detection

Sprint 3: User Experience Polish (High Utility)

Focus: Make the app faster and more intuitive
Effort: ~10-12 hours | Impact: High | Timeline: Week 3-4

3.1 Quick Access Features ⏱️

Why: Speed up repetitive tasks
Effort: Low (2-3 hours) | Impact: Medium-High

  • Copy to Clipboard - Copy processed image directly
  • Recent Files - Quick access to last 10 processed images (localStorage)
  • Undo/Redo - Revert parameter changes
  • Favorites - Star frequently used presets
  • Quick Settings - Toggle common options in header

3.2 Image Analysis & Info 🔍 HIGH VALUE

Why: Understand your images better
Effort: Low (2-3 hours) | Impact: Medium-High

  • Metadata Display: Dimensions, format, color space, DPI
  • Color Palette Extraction: Show dominant colors (5-8)
  • Transparency Detection: Warn if converting transparent to JPEG
  • File Size Projection: Estimate final size before download
  • Aspect Ratio Calculator: Calculate dimensions maintaining ratio
  • Memory Usage: Show current memory consumption

3.3 Format Intelligence 🧠

Why: Help users choose the right format
Effort: Low (2-3 hours) | Impact: Medium

  • Format Recommendations: Suggest best format based on image
  • Browser Support Detection: Show WebP/AVIF compatibility
  • Multi-Format Export: Generate PNG + WebP + JPEG at once
  • Responsive Image Sets: Export multiple sizes for responsive design

3.4 UI/UX Improvements

Effort: Low-Medium (3-4 hours) | Impact: Medium

  • Mobile Responsive Design: Better mobile/tablet experience
  • Toast Notifications: Non-blocking feedback messages
  • Drag to Reorder: Reorder batch queue
  • Compare Mode: Slider to compare before/after
  • Zoom Controls: Zoom in on preview images
  • Grid/List Toggle: Switch preview layout

Sprint 4: Advanced Features (Power Users)

Focus: Professional-grade tools
Effort: ~15-20 hours | Impact: Medium-High | Timeline: Week 5-6

4.1 Custom Crop Tool ✂️

Why: Precise control over cropping
Effort: High (8-10 hours) | Impact: Medium-High

  • Visual Crop Selector: Interactive drag handles
  • Aspect Ratio Lock: 16:9, 4:3, 1:1, custom
  • Freeform Cropping: No ratio constraints
  • Rule of Thirds Grid: Photography composition guide
  • Golden Ratio Grid: Advanced composition
  • Zoom for Precision: Zoom in for pixel-perfect crops
  • Crop Presets: Social media sizes (Instagram, Facebook, etc.)

4.2 Filters & Effects 🌈

Why: Quick image enhancements
Effort: Medium (5-6 hours) | Impact: Medium

  • Brightness/Contrast: Adjust exposure
  • Saturation: Boost or reduce colors
  • Sharpness: Enhance edges
  • Blur: Gaussian blur with radius control
  • Tint: Apply color overlay
  • Vintage Filter: Sepia tone
  • Invert Colors: Negative effect
  • Filter Presets: Quick apply common filters

4.3 Watermarking 📝

Why: Protect and brand images
Effort: Medium (4-5 hours) | Impact: Medium

  • Text Watermark: Custom text with font selection
  • Image Watermark: Upload logo overlay
  • Position Control: 9 positions + custom X/Y
  • Opacity: Adjust transparency (0-100%)
  • Repeat Pattern: Tile watermark across image
  • Batch Watermark: Apply to all images in batch

Sprint 5: Workflow & Automation (Productivity)

Focus: Save time with reusable workflows
Effort: ~8-10 hours | Impact: Medium | Timeline: Week 7+

5.1 Custom Presets & Templates

Why: Reusable transformation pipelines
Effort: Low-Medium (3-4 hours) | Impact: Medium

  • Save Custom Presets: Create your own quick-access presets
  • Preset Categories: Organize by use case
  • Import/Export Presets: Share as JSON files
  • Transformation Chains: Combine multiple operations
  • Preset Shortcuts: Assign keyboard shortcuts (1-9 keys)
  • Community Presets: Gallery of user-submitted presets

5.2 History & Session Management

Why: Track and repeat common tasks
Effort: Low (2-3 hours) | Impact: Low-Medium

  • Processing History: Last 50 transformations
  • Quick Re-apply: Reload previous settings
  • Export History: Save session as JSON
  • Clear History: Privacy button
  • Session Restore: Resume after browser close

Future: Extended Format Support (Lower Priority)

Focus: Support more file types
Effort: Variable | Impact: Situational

Additional Formats

  • AVIF Support: Next-gen image format
  • TIFF Support: Professional photography
  • SVG to Raster: Convert vector to bitmap
  • ICO Generation: Create favicons (16, 32, 48, 64, 128, 256px)
  • PDF to Image: Extract first page as image
  • GIF Frame Extraction: Convert animated GIF to frames
  • HEIC/HEIF Support: Apple photo format

Enterprise & API (Optional)

Focus: For hosted/managed deployments
Effort: High | Impact: Situational

API Access

  • Generate API keys in UI
  • Rate limiting per key
  • Usage statistics dashboard
  • Webhook support for async processing
  • OpenAPI/Swagger documentation
  • SDK libraries (Python, Node.js, PHP)

User Accounts (Optional)

  • User authentication
  • Per-user quotas
  • Cloud storage integration (S3, MinIO)
  • Saved presets sync
  • Usage analytics
  • Team collaboration features

New High-Value Ideas 💡

Image Comparison Tool 🔍

Why: A/B test different settings
Effort: Low-Medium (3-4 hours) | Impact: Medium

  • Side-by-side comparison of 2-4 versions
  • Slider reveal to show differences
  • Quality vs file size comparison matrix
  • Export comparison settings for sharing

Background Removal ✨ HIGH VALUE

Why: Remove backgrounds automatically
Effort: Medium-High (6-8 hours) | Impact: Very High

  • AI-powered background removal (using @imgly/background-removal or similar)
  • Replace with solid color
  • Replace with gradient
  • Replace with uploaded image
  • Transparency preservation
  • Edge refinement controls

Smart Resize 🦾 HIGH VALUE

Why: Content-aware resizing
Effort: Medium (4-5 hours) | Impact: High

  • Content-aware scaling: Preserve important areas
  • Face detection: Protect faces during crop
  • Center of interest: Auto-detect focal point
  • Smart crop suggestions: AI-suggested crop areas

Color Adjustments 🎨

Why: Fine-tune image colors
Effort: Medium (4-5 hours) | Impact: Medium

  • Hue/Saturation/Lightness sliders
  • Color temperature (warm/cool)
  • Vibrance (selective saturation)
  • Color balance (shadows, midtones, highlights)
  • White balance correction
  • Color grading presets

Border & Frame Effects 🖼️

Why: Add decorative elements
Effort: Low-Medium (3-4 hours) | Impact: Low-Medium

  • Solid borders: Color and thickness
  • Padding: Add transparent/colored space
  • Rounded corners: Border radius control
  • Shadow effects: Drop shadow with blur
  • Frame templates: Decorative frames
  • Polaroid effect: Instant camera style

Image Merge & Collage 🖼️

Why: Combine multiple images
Effort: High (8-10 hours) | Impact: Medium

  • Side-by-side merge: Horizontal/vertical
  • Grid layout: 2x2, 3x3, custom
  • Collage templates: Pre-designed layouts
  • Spacing control: Gap between images
  • Background color: For gaps

Conditional Processing 🤖

Why: Smart automation based on image properties
Effort: Medium (4-5 hours) | Impact: Medium

  • Size-based rules: Different settings for large vs small images
  • Format detection: Auto-convert based on transparency
  • Quality ranges: Set min/max quality constraints
  • Dimension limits: Enforce max width/height

Technical Debt & Infrastructure

Code Quality

  • Unit tests (backend) - Vitest/Jest
  • E2E tests (frontend) - Playwright
  • TypeScript strict mode
  • ESLint + Prettier configuration
  • CI/CD pipeline (GitHub Actions or Gitea Actions)
  • Code coverage reporting (>80%)
  • Automated dependency updates (Renovate)

Performance

  • Image processing queue (for heavy operations)
  • Web Workers for client-side processing
  • Service Worker for offline support
  • Lazy loading for UI components
  • Memory leak detection and fixes
  • Performance monitoring (Lighthouse CI)

Security

  • Rate limiting (prevent abuse)
  • File type validation (magic bytes check)
  • Max file size enforcement (configurable)
  • CORS configuration hardening
  • CSP headers
  • Input sanitization audit
  • Security headers (HSTS, X-Frame-Options)
  • Dependency vulnerability scanning

Monitoring & Analytics

  • Prometheus metrics endpoint
  • Error tracking (Sentry integration)
  • Performance monitoring (Real User Monitoring)
  • Usage analytics (privacy-focused, self-hosted)
  • Health check dashboard

Priority Matrix (Updated)

Immediate Next Steps (Sprint 2)

  1. 🚀 Batch Processing - Highest utility, medium effort
  2. ⚡ Auto-Optimize - Quick win, very high value
  3. 🎨 Basic Operations - Essential features (rotate, flip, grayscale)

High Value, Medium Effort (Sprint 3-4)

  1. 🔍 Image Analysis - Understand images better
  2. ✨ Background Removal - AI-powered, huge demand
  3. 🦾 Smart Resize - Content-aware scaling
  4. ✂️ Custom Crop Tool - Professional precision

Polish & Productivity (Sprint 5+)

  1. ⏱️ Quick Access Features - Speed up workflow
  2. 📝 Custom Presets - Reusable workflows
  3. 🎨 Filters & Effects - Creative options

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: March 8, 2026 (Sprint 1 Complete)

Reference in New Issue View Git Blame Copy Permalink