Image Editor - User Guide

Overview

The Image Editor is a powerful tool for enhancing and transforming your photos with professional-grade adjustments. Using advanced image processing algorithms powered by Sharp library, you can apply color corrections, creative filters, and artistic presets with real-time preview.

Key Features

🎨 Professional Adjustments

Brightness control (-100 to +100)
Contrast adjustment (-100 to +100)
Saturation levels (-100 to +100)
Hue rotation (0° to 360°)
Sharpness enhancement (0 to 20)
Blur effect (0 to 20)

✨ Creative Presets

Vivid - Vibrant, saturated colors
Dramatic - High contrast, moody look
Vintage - Classic sepia tone
Cool - Blue-tinted, refreshing
Warm - Orange-tinted, cozy
Black & White - Monochrome classic
Soft - Gentle, dreamy blur
Sharp - Enhanced detail and clarity

🎭 Special Effects

Grayscale conversion
Sepia tone filter
Color inversion

⚡ Real-Time Processing

Live preview as you adjust
Side-by-side comparison
Instant preset application
Debounced updates for smooth performance

How to Use

Basic Workflow

Upload Image: Click "Upload Image" and select your photo
Choose Preset (Optional): Apply one of 8 creative presets for instant results
Fine-Tune: Use manual sliders to adjust individual settings
Download: Save your edited image

Step-by-Step Guide

1. Upload Your Image

Click Upload:

Click the "Upload Image" button
Select an image from your device
Supported formats: JPEG, PNG, WebP

What Happens:

Original image appears on the left
Edited preview appears on the right
All adjustment controls become available

2. Apply Quick Presets

Choose a Preset:

Browse the 8 preset options
Click any preset to instantly apply it
Selected preset is highlighted

Available Presets:

🌈 Vivid:

Saturation: +30
Contrast: +15
Brightness: +5
Sharpen: +5
Best for: Landscape photos, nature shots

⚡ Dramatic:

Contrast: +40
Brightness: -10
Saturation: +20
Sharpen: +8
Best for: Portraits, artistic shots

📷 Vintage:

Saturation: -20
Contrast: -10
Brightness: +10
Sepia tone applied
Best for: Old-style, nostalgic photos

❄️ Cool:

Saturation: +15
Brightness: +10
Hue: 200° (blue shift)
Best for: Winter scenes, modern look

🔥 Warm:

Saturation: +20
Brightness: +5
Hue: 30° (orange shift)
Best for: Sunset photos, cozy atmosphere

⚫ Black & White:

Grayscale: Enabled
Contrast: +20
Best for: Classic portraits, artistic photography

💫 Soft:

Blur: 2
Brightness: +10
Saturation: -15
Best for: Dreamy effects, portraits

💎 Sharp:

Sharpen: +15
Contrast: +25
Best for: Product photos, architectural shots

3. Manual Adjustments

Brightness:

Range: -100 (darker) to +100 (brighter)
Use for: Fixing underexposed or overexposed photos
Tip: Small adjustments (±10-20) usually work best

Contrast:

Range: -100 (flat) to +100 (punchy)
Use for: Adding drama or softening harsh images
Tip: +20 to +40 creates impactful photos

Saturation:

Range: -100 (desaturated) to +100 (vivid)
Use for: Boosting dull colors or creating muted tones
Tip: -100 creates grayscale effect

Hue Rotation:

Range: 0° to 360°
Use for: Color shifting, creative effects
Examples:
- 30°-60°: Warm orange/yellow tones
- 180°-240°: Cool blue/cyan tones
- 270°-330°: Purple/magenta tones

Sharpen:

Range: 0 (no sharpening) to 20 (maximum)
Use for: Enhancing edge detail and clarity
Tip: 5-10 for subtle improvement, 15+ for dramatic effect
Warning: Over-sharpening can create artifacts

Blur:

Range: 0 (no blur) to 20 (heavy blur)
Use for: Soft focus, dreamy effects
Tip: 2-5 for subtle softness, 10+ for background blur
Note: Cannot use blur and sharpen together effectively

Special Effects:

✅ Grayscale: Convert to black and white
✅ Sepia: Apply warm brown vintage tone
✅ Invert Colors: Create negative effect

4. Reset and Start Over

Reset All:

Click "Reset All" button in presets section
Returns all settings to default (0)
Restores original image
Clears preset selection

5. Download Your Edited Image

Download:

Click the "Download" button
File saves as edited_[original_filename]
Format preserved (JPEG, PNG, WebP)
High quality (95%) maintained

Understanding the Controls

Color Theory Basics

Brightness:

Adds or removes light
Affects all colors equally
Does not change color relationships

Contrast:

Increases difference between light and dark
Makes darks darker, lights lighter
Enhances depth and dimension

Saturation:

Controls color intensity
High saturation = vivid, bold colors
Low saturation = muted, pastel colors
Zero saturation = grayscale

Hue:

Rotates through color spectrum
Changes actual colors (red → orange → yellow → green → blue → purple)
Useful for color correction and creative effects

Sharpness vs Blur

When to Sharpen:

Slightly soft or out-of-focus images
Product photography
Architectural details
Text or fine details

When to Blur:

Softening skin in portraits
Creating dreamy atmosphere
Reducing noise or grain
Artistic soft-focus effects

Best Practices

Portrait Photos:

Start with "Dramatic" or "Soft" preset
Adjust brightness to flatter skin tones (+5 to +10)
Slight saturation boost (+10 to +15)
Very subtle sharpening (3-5)

Landscape Photos:

Try "Vivid" preset for punchy colors
Increase contrast (+15 to +30)
Boost saturation (+20 to +30)
Sharpen for detail (8-12)

Product Photography:

Use "Sharp" preset
Maximize contrast (+30 to +40)
Keep saturation natural (0 to +10)
Heavy sharpening (15-20)

Artistic/Creative:

Experiment with hue rotation
Try "Vintage" or "Cool" presets
Use special effects (grayscale, sepia, invert)
Combine blur with saturation reduction

Technical Details

Image Processing

Backend Technology:

Sharp library (libvips-based)
Server-side processing
High-performance C++ bindings
Professional-grade algorithms

Operations Applied:

Modulate (Brightness, Saturation, Hue):
- Brightness: Multiplier 1 + (value/100)
- Saturation: Multiplier 1 + (value/100)
- Hue: Direct degree rotation
Linear (Contrast):
- Formula: linear(a, b) where a = 1 + (contrast/100)
- Adjusts slope of tone curve
Sharpen:
- Uses unsharp mask algorithm
- Sigma value: 1 + (sharpen/10)
- Enhances edge contrast
Blur:
- Gaussian blur algorithm
- Radius: blur/2 pixels
Effects:
- Grayscale: Luminance-based conversion
- Sepia: Grayscale + warm tint (R:112, G:66, B:20)
- Invert: Negate operation

Supported Formats

Input:

JPEG (.jpg, .jpeg)
PNG (.png)
WebP (.webp)

Output:

JPEG: 95% quality, MozJPEG encoder
PNG: 100% quality, lossless
WebP: 95% quality, lossy

Processing:

All operations non-destructive
Original file untouched
High-quality output maintained

Use Cases

Professional Photography

Wedding Photos:

Use "Soft" or "Warm" presets
Gentle brightness boost
Subtle saturation increase
Light softening blur

Real Estate:

"Vivid" preset for appealing colors
Brightness +10 to +20
High contrast (+30)
Sharpness for detail

Fashion Photography:

"Dramatic" preset for impact
High contrast (+40)
Vibrant saturation (+25)
Sharpness for texture

Social Media

Instagram-Ready:

Apply "Vivid" preset
Boost saturation (+20 to +30)
Increase contrast (+20)
Add slight sharpening (+5)

Profile Pictures:

Start with "Soft" preset
Brightness +5 to +10
Very light blur (1-2) for skin smoothing
Natural saturation (0 to +10)

Creative Projects

Album Covers:

Experiment with hue rotation
High contrast (+40+)
Special effects (invert, sepia)
Bold saturation adjustments

Poster Design:

"Sharp" preset for clarity
Maximum contrast
Vivid colors
High sharpness

Vintage Effects:

"Vintage" preset as base
Reduce saturation further
Add slight blur
Warm brightness adjustment

Troubleshooting

Image Appears Different After Upload

Possible Causes:

Color profile differences
Browser rendering
Monitor calibration

Solution:

Use manual adjustments to compensate
Compare with original side-by-side
Download and check in photo viewer

Processing Takes Long Time

Normal Processing Time:

Small images (< 1MB): 0.5-1 seconds
Medium images (1-5MB): 1-3 seconds
Large images (5-10MB): 3-5 seconds

If Slower:

Check internet connection
Try smaller image size
Reduce number of simultaneous adjustments

Edited Image Looks Over-Processed

Common Mistakes:

Too much sharpening (> 15)
Excessive saturation (> +30)
Extreme contrast (> +50)
Multiple effects stacked

Solution:

Use "Reset All" and start fresh
Apply preset as baseline
Make subtle manual adjustments
Less is often more

Download Not Working

Check:

Browser pop-up blocker settings
File download permissions
Available disk space

Alternative:

Right-click edited image → "Save image as..."
Try different browser

Privacy & Security

Data Handling

Image Processing:

Server-side processing only
No permanent storage
Files deleted immediately after processing
No image data retained

Privacy Features:

No image analysis or logging
No metadata collection
No third-party sharing
Secure HTTPS transmission

Local Storage:

Images never stored on server
Preview generated in browser
Only processed buffer transmitted
Complete privacy guaranteed

Keyboard Shortcuts

While we don't currently have keyboard shortcuts, you can use:

Tab: Navigate between sliders
Arrow Keys: Adjust slider values
Space: Toggle checkboxes when focused
Enter: Apply focused button action

Tips for Best Results

General Guidelines

Start with Presets: They're professionally calibrated
Make Small Adjustments: ±5-15 usually sufficient
Use Side-by-Side: Compare with original frequently
Less is More: Subtle edits often look better
Download High Quality: We maintain 95% JPEG quality

Common Combinations

Sun-Kissed Look:

Warm preset
Brightness +10
Saturation +15

Moody Drama:

Dramatic preset
Brightness -15
Additional contrast +10

Clean & Professional:

Sharp preset
Brightness +5
Saturation 0

Dreamy Soft:

Soft preset
Brightness +15
Additional blur +2

FAQs

Q: Can I edit multiple images at once? A: Currently one image at a time. Upload, edit, download, then repeat.

Q: Will my image quality be reduced? A: We maintain 95% JPEG quality or 100% PNG quality. Minimal quality loss.

Q: Can I undo individual adjustments? A: Slide any control back to 0, or use "Reset All" for fresh start.

Q: Do presets overwrite my manual adjustments? A: Yes, applying a preset replaces all current settings.

Q: Can I save my custom preset? A: Not currently, but you can note your favorite slider values.

Q: What's the maximum image size? A: We support images up to 20MB. Larger files may time out.

Q: Why does hue rotation look strange? A: Hue rotation changes all colors. Works best on limited color palettes.

Q: Can I crop or resize images? A: Not in this tool. Focus is on color/quality adjustments only.

Q: Are filters applied in order? A: Yes: Modulate → Contrast → Sharpen/Blur → Effects → Format conversion

Q: Can I edit AVIF or HEIC images? A: Currently JPEG, PNG, and WebP only. Convert first if needed.

Browser Compatibility

Fully Supported:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Required Features:

ES2020 JavaScript
File API
Blob URLs
Fetch API

Not Supported:

Internet Explorer (all versions)
Very old mobile browsers

Feedback & Support

Found a bug or have a feature request? We're continuously improving the Image Editor based on user feedback.

Common Requests:

Crop and resize tools
Custom preset saving
Batch image processing
Advanced filters (vignette, grain, etc.)

Version: 1.0.0
Last Updated: November 2025
Powered By: Sharp (libvips)