DEV Community

Bobo
Bobo

Posted on

Batch Optimize Images Like a Pro: CLI Guide for Web Performance

#javascript #webperf #cli #image

Batch Optimize Images Like a Pro

Images account for 60% of a typical webpage's weight. Optimizing them is the single biggest performance win you can make.

The Problem

  • Manual optimization is tedious
  • Online tools have file size limits
  • Photoshop isn't scriptable for batch jobs
  • GUI tools can't integrate into build pipelines

The Solution: image-optimizer CLI 

npm install -g image-optimizer
Enter fullscreen mode Exit fullscreen mode

One-Command Optimization

Compress an Entire Folder 

image-optimizer compress ./website/images/ -o ./optimized/
# Reduces file size by 60-80% with minimal quality loss
Enter fullscreen mode Exit fullscreen mode

Resize for Web 

image-optimizer resize ./photos/ --width 1920 -o ./web/
image-optimizer resize ./photos/ --width 300 -o ./thumbs/
Enter fullscreen mode Exit fullscreen mode

Convert to Modern Formats 

# Convert all images to WebP
image-optimizer convert ./images/ --format webp -o ./webp/

# Convert to JPEG with quality setting
image-optimizer convert ./images/ --format jpg --quality 85
Enter fullscreen mode Exit fullscreen mode

All-in-One Pipeline 

image-optimizer process ./raw/ --compress --resize 1920 --format webp
Enter fullscreen mode Exit fullscreen mode

Performance Comparison

Original Optimized Savings
2.4 MB 480 KB 80%
1.1 MB 220 KB 80%
850 KB 170 KB 80%

Integrate with Your Build 

# package.json
{
    "scripts": {
        "optimize-images": "image-optimizer process ./src/images/ --resize 1920 --format webp -o ./dist/images/"
    }
}
Enter fullscreen mode Exit fullscreen mode

Supported Formats

  • JPEG → JPEG, WebP ✅
  • PNG → PNG, WebP ✅
  • BMP → All formats ✅
  • TIFF → All formats ✅
  • WebP → WebP, JPEG ✅

Links

How do you optimize images for the web? Share your workflow!

Top comments (0)