Optimize

Optimize image file size with minimal quality loss. Perfect for web optimization, faster loading times, reduced storage costs, and bandwidth savings while maintaining visual quality.

Installation

To install the Image plugin:

Terminal
$ npm install -g @mediaproc/image

Usage

Terminal
$ mediaproc image optimize <input> [options]

Basic Usage

Terminal
$ mediaproc image optimize photo.jpg
✓ Optimized • 2.4 MB → 1.8 MB (25% reduction)
Terminal
$ mediaproc image optimize image.png -q 90
✓ Optimized • 845 KB → 712 KB (16% reduction)
Terminal
$ mediaproc image optimize pic.jpg --aggressive
✓ Optimized • 3.2 MB → 1.1 MB (66% reduction)
$ mediaproc image optimize photo.webp -q 80
$ mediaproc image optimize photo.jpg --dry-run

Options

OptionAliasTypeDefaultDescription
--output <path>-ostring<input>-optimized.<ext>Output file path
--quality <quality>-qnumber85Quality level (1-100)
--aggressivebooleanfalseAggressive compression (quality 70)
--dry-runbooleanfalseShow what would be done without executing
--verbose-vbooleanfalseShow detailed processing information
--helpbooleanfalseDisplay help information

Quality Guide

Choosing the Right Quality Level

For most web use cases, quality 85 provides the best balance between file size and visual quality. Use quality 90+ for hero images or when quality is critical. For thumbnails or background images, quality 70-80 is often sufficient.

Quality Levels

  • 90-100: Minimal compression, large files, near-lossless
  • 85-89: Balanced (recommended for web) - default
  • 70-84: Good compression, slight quality loss
  • 50-69: High compression, noticeable quality loss
  • 1-49: Maximum compression, significant artifacts

Aggressive Mode

When --aggressive flag is used:

  • Quality set to 70
  • Maximum compression applied
  • Metadata stripped
  • Best for thumbnails and previews

Optimization Techniques

JPEG Optimization

Terminal
$ mediaproc image optimize photo.jpg -q 85
✓ Progressive JPEG enabled
✓ MozJPEG compression applied
✓ Metadata stripped
✓ Optimized: 2.4 MB → 1.6 MB (33% reduction)

Techniques Applied:

  • Progressive JPEG encoding
  • MozJPEG compression (better than standard JPEG)
  • Metadata removal (EXIF, IPTC)
  • Optimized Huffman tables
  • Chroma subsampling

PNG Optimization

mediaproc image optimize image.png -q 85

Techniques Applied:

  • Maximum compression level (9)
  • Progressive rendering
  • Metadata removal
  • Maximum optimization effort (10)
  • Palette optimization for indexed colors

WebP Optimization

mediaproc image optimize modern.webp -q 85

Techniques Applied:

  • WebP-specific compression
  • Effort level 6 (high quality/size balance)
  • Metadata removal
  • Smart lossy compression

AVIF Optimization

mediaproc image optimize next-gen.avif -q 85

Techniques Applied:

  • AVIF compression (best compression)
  • Effort level 9 (maximum quality)
  • Metadata removal
  • Next-generation codec efficiency

Examples

1. Default Web Optimization

Optimize for web with balanced quality/size:

mediaproc image optimize website-image.jpg

Result: ~30-50% size reduction, imperceptible quality loss, outputs website-image-optimized.jpg.

2. High Quality Optimization

Minimal compression for important images:

mediaproc image optimize hero-image.jpg -q 90

Effect: ~20-30% size reduction, virtually no visible quality loss.

3. Aggressive Compression

Maximum size reduction for thumbnails:

mediaproc image optimize thumbnail.jpg --aggressive

Size: ~60-70% reduction, quality 70, suitable for small previews.

4. Custom Quality Level

Fine-tune compression:

mediaproc image optimize product.jpg -q 80 -o compressed.jpg

Balance: Good compression with acceptable quality for product photos.

5. Batch Web Optimization

Optimize all images for website:

mediaproc image optimize "website-images/*.jpg"

Output: Creates *-optimized.jpg for each file with consistent compression.

6. PNG Optimization

Optimize large PNG files:

mediaproc image optimize screenshot.png

Effect: Lossless size reduction through better compression, metadata removal.

7. WebP Optimization

Optimize modern WebP images:

mediaproc image optimize banner.webp -q 85

Modern: WebP already efficient, further optimized with smart compression.

8. Social Media Optimization

Optimize for social media upload:

mediaproc image optimize social-post.jpg -q 80

Fast Upload: Smaller files upload faster to social platforms.

9. Email Optimization

Reduce size for email attachments:

mediaproc image optimize attachment.jpg -q 75

Email-Friendly: Small enough for quick sending, good enough for viewing.

10. Mobile App Assets

Optimize app images:

mediaproc image optimize "app-assets/*.png" -q 85

App Size: Reduced app download size without quality issues.

11. Preview Changes

Check optimization before processing:

mediaproc image optimize large-file.jpg --dry-run

Safety: Verify operation and output path.

12. Portfolio Images

Balance quality and loading speed:

mediaproc image optimize portfolio-shot.jpg -q 88

Professional: High quality for portfolio while optimized for web.

13. E-commerce Products

Optimize product catalog:

mediaproc image optimize "products/*.jpg" -q 85

Retail: Fast page loading without compromising product appearance.

14. Blog Images

Optimize blog post images:

mediaproc image optimize blog-photo.jpg -q 82

Performance: Faster blog loading, better SEO.

15. Verbose Output

See detailed optimization info:

mediaproc image optimize photo.jpg --verbose

Analysis: Shows original size, compressed size, percentage saved.

File Size Reduction

Expected Savings

JPEG (Quality 85):

  • Original (Quality 100): 5.2 MB
  • Optimized (Quality 85): 1.8 MB
  • Savings: ~65%

PNG:

  • Original (Unoptimized): 3.4 MB
  • Optimized (Level 9): 2.1 MB
  • Savings: ~38%

WebP (Quality 85):

  • From JPEG: ~25-35% smaller
  • From PNG: ~26-50% smaller

Quality vs Size

# Quality 95 - Minimal savings (~20-30%)
mediaproc image optimize photo.jpg -q 95

# Quality 85 - Good savings (~50-60%) - RECOMMENDED
mediaproc image optimize photo.jpg -q 85

# Quality 70 - Max savings (~70-80%)
mediaproc image optimize photo.jpg --aggressive

Format-Specific Optimization

JPEG

mediaproc image optimize photo.jpg -q 85

Techniques:

  • Progressive encoding: Loads gradually
  • MozJPEG: Superior compression
  • Strips EXIF: Removes camera data
  • Optimized tables: Better compression ratios

PNG

mediaproc image optimize graphic.png -q 85

Techniques:

  • Compression level 9: Maximum lossless compression
  • Progressive: Interlaced rendering
  • Effort 10: Maximum optimization time
  • Strips metadata: Removes unnecessary chunks

WebP

mediaproc image optimize modern.webp -q 85

Techniques:

  • Effort 6: Balance between speed and compression
  • Smart lossy: Perceptually optimized
  • Better than JPEG: ~25% smaller at same quality

AVIF

mediaproc image optimize next-gen.avif -q 85

Techniques:

  • Effort 9: Near-maximum compression
  • Best compression: ~50% better than JPEG
  • Modern browsers: Chrome, Firefox support

Use Cases

1. Website Performance

Speed up website loading:

mediaproc image optimize "website/*.jpg" -q 85

Benefits:

  • Faster page load
  • Better SEO ranking
  • Improved user experience
  • Reduced bandwidth costs

2. Mobile App Size

Reduce app download size:

mediaproc image optimize "app-assets/*.png"

Impact:

  • Smaller app package
  • Faster installation
  • Lower cellular data usage

3. Email Attachments

Make emails sendable:

mediaproc image optimize large-photo.jpg -q 75

Result:

  • Under email size limits
  • Quick upload/download
  • Maintains viewability

4. Cloud Storage

Save storage space:

mediaproc image optimize "cloud-backup/*.jpg"

Savings:

  • Reduced storage costs
  • Faster sync times
  • More storage capacity

5. Social Media

Optimize before uploading:

mediaproc image optimize instagram-post.jpg -q 80

Advantage:

  • Faster upload
  • Preserve quality before platform compression
  • Better final appearance

6. E-commerce

Optimize product images:

mediaproc image optimize "products/*.jpg" -q 85

Business Impact:

  • Faster catalog loading
  • Better conversion rates
  • Lower CDN costs

7. Blog/CMS

Optimize content images:

mediaproc image optimize article-image.jpg -q 82

Publishing:

  • Quick page rendering
  • Better reader experience
  • SEO benefits

8. Photography Portfolio

Balance quality and performance:

mediaproc image optimize portfolio/*.jpg -q 88

Professional:

  • Show work at high quality
  • Fast gallery loading
  • Bandwidth savings

9. Digital Marketing

Optimize ad creatives:

mediaproc image optimize ad-banner.jpg -q 80

Marketing:

  • Fast ad loading
  • Better ad performance
  • Lower hosting costs

10. PDF Generation

Optimize images before PDF:

mediaproc image optimize "report-images/*.jpg" -q 80

Documents:

  • Smaller PDF files
  • Easier sharing
  • Faster viewing

Metadata Handling

Removed Metadata

Optimization strips:

  • EXIF: Camera settings, GPS location
  • IPTC: Copyright, keywords
  • XMP: Adobe metadata
  • ICC Profile: Color profile (sometimes)

Preserved Data

Only essential data kept:

  • Orientation: Image rotation
  • Pixel data: Image content
  • Format: File type information

Privacy Benefits

# Remove location data automatically
mediaproc image optimize geotagged-photo.jpg

Security: GPS coordinates and camera info removed.

Performance Optimization

Processing Speed

  • JPEG: Fast (~100-200ms per megapixel)
  • PNG: Slower (~200-400ms per megapixel, lossless)
  • WebP: Moderate (~150-300ms per megapixel)
  • AVIF: Slowest (~500ms+ per megapixel, best compression)

Batch Processing

# Process multiple files efficiently
mediaproc image optimize "images/*.jpg"

Efficient: Sequential processing with automatic memory management.

Memory Usage

  • Small images (under 2MP): ~100MB
  • Medium images (2-8MP): ~200-300MB
  • Large images (over 8MP): ~300-500MB

Best Practices

1. Choose Right Quality

# Web images: 80-85
mediaproc image optimize web-image.jpg -q 85

# Thumbnails: 70-75
mediaproc image optimize thumb.jpg -q 70

# Portfolio/Print: 88-92
mediaproc image optimize portfolio.jpg -q 90

2. Test on Sample

Before batch processing:

# Test one image
mediaproc image optimize sample.jpg -q 85

# Compare quality
# If good, process all
mediaproc image optimize "all/*.jpg" -q 85

3. Keep Originals

Always preserve originals:

# Outputs to new file by default
mediaproc image optimize original.jpg
# Creates: original-optimized.jpg
# Original preserved

4. Consider Format Conversion

For maximum savings, convert format:

# Convert PNG to WebP (even better compression)
mediaproc image convert logo.png -f webp -q 85

5. Use Dry Run

Preview before processing:

mediaproc image optimize photo.jpg --dry-run

6. Monitor File Size

Check savings with verbose mode:

mediaproc image optimize large-file.jpg -q 85 --verbose

7. Batch Similar Images

Group by type for consistent quality:

# Photos
mediaproc image optimize "photos/*.jpg" -q 85

# Graphics
mediaproc image optimize "graphics/*.png" -q 88

Troubleshooting

Issue: Quality Too Low

Problem: Output looks worse than expected

Solution: Increase quality:

# Instead of
mediaproc image optimize photo.jpg --aggressive

# Use
mediaproc image optimize photo.jpg -q 85

Issue: Not Enough Savings

Problem: File size didn't reduce much

Possible Causes:

  • Image already optimized
  • PNG with minimal redundancy
  • Quality setting too high

Solutions:

# Try lower quality
mediaproc image optimize photo.jpg -q 80

# Or aggressive mode
mediaproc image optimize photo.jpg --aggressive

# Or convert format
mediaproc image convert photo.jpg -f webp -q 85

Issue: Slow Processing

Problem: Optimization takes too long

Cause: Large files, high effort settings

Solution: Process in batches, be patient:

# PNG is slower but worthwhile
mediaproc image optimize large.png
# This is normal, wait for completion

Issue: Output Looks Same

Problem: No visible difference after optimization

Good News: That's the goal! Check file size:

mediaproc image optimize photo.jpg --verbose
# Shows: 5.2MB → 1.8MB (65% savings)
  • convert - Convert to more efficient formats (WebP, AVIF)
  • resize - Reduce dimensions for additional savings
  • thumbnail - Create small optimized previews
  • auto-enhance - Enhance before optimizing

Further Reading

Found an issue? Help us improve this page.

Edit on GitHub →