Image Optimizer Pro

Production-ready VS Code extension for image optimization and asset management

Features • Installation • Usage • Configuration • Commands

Features

Core Features

• Folder Selection - Select folders and recursively scan for images (PNG, JPG, JPEG, WebP, AVIF, SVG, GIF)
• Image Conversion - Convert images to modern formats (WebP, AVIF, JPG, PNG)
• Smart Compression - Multiple compression modes with configurable quality
• Safe Cleanup - Remove original files with backup and undo support
• Detailed Reports - Generate reports in JSON or Markdown format

🚀 Advanced Features

• Smart Optimization - Automatically choose the best format for each image
• Responsive Images - Generate multiple sizes with HTML <picture> snippets
• Watch Mode - Automatically process new images in watched folders
• Doctor Mode - Scan for large, unused, or non-modern format images
• Project Presets - Pre-configured settings for Nuxt, Vue, React, Laravel, and static sites

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
3. Search for "Image Optimizer Pro"
4. Click Install

From VSIX File

1. Download the .vsix file from Releases
2. Open VS Code
3. Press Ctrl+Shift+P and run "Extensions: Install from VSIX..."
4. Select the downloaded file

Usage

Quick Start

1. Open the Image Optimizer sidebar (click the icon in the Activity Bar)
2. Click Select Folder to choose a folder with images
3. View the scan summary showing total images, sizes, and formats
4. Choose an action:
   • Compress Images - Reduce file sizes
   • Convert Format - Change to WebP/AVIF
   • Smart Optimize - Automatic best format selection

Using Commands

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) and type:

• Image Optimizer: Select Folder
• Image Optimizer: Compress Images
• Image Optimizer: Convert Images
• Image Optimizer: Smart Optimize
• Image Optimizer: Generate Responsive Images
• Image Optimizer: Run Doctor
• Image Optimizer: Watch Folder

Context Menu

Right-click on any folder in the Explorer to access optimization options directly.

Configuration

Open Settings (Ctrl+,) and search for "Image Optimizer" to customize:

Project Presets

Choose a preset to automatically configure settings for your project type:

Commands

Compression Modes

📱 Responsive Image Generation

Generate multiple sizes for responsive images:

<picture>
  <source
    type="image/avif"
    srcset="image-320w.avif 320w, image-640w.avif 640w, image-1280w.avif 1280w"
    sizes="(max-width: 320px) 100vw, 1280px"
  />
  <source
    type="image/webp"
    srcset="image-320w.webp 320w, image-640w.webp 640w, image-1280w.webp 1280w"
    sizes="(max-width: 320px) 100vw, 1280px"
  />
  <img src="https://github.com/keroloszakaria/image-optimizer-pro/raw/HEAD/image-1280w.jpg" alt="" loading="lazy" decoding="async" />
</picture>

Doctor Mode

Doctor mode scans your project for:

• Large Images - Files over 500KB that should be compressed
• Unused Images - Images not referenced in source files
• Non-Modern Formats - PNG/JPG files that could be WebP/AVIF

📊 Reports

Export optimization reports in two formats:

Markdown Report

# Image Optimization Report

**Generated:** 2026-01-22T10:30:00.000Z
**Operation:** compress

## Summary

| Metric          | Value          |
| --------------- | -------------- |
| Total Processed | 25             |
| Successful      | 25             |
| Original Size   | 15.2 MB        |
| Output Size     | 8.4 MB         |
| Saved           | 6.8 MB (44.7%) |

JSON Report

{
  "id": "report-123456",
  "timestamp": "2026-01-22T10:30:00.000Z",
  "operationType": "compress",
  "result": {
    "totalProcessed": 25,
    "successful": 25,
    "totalSavedPercent": 44.7
  }
}

Requirements

• VS Code 1.85.0 or higher
• Node.js 18+ (for development)

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.