webp-image-optimizer

WebP Image Optimizer

A lightweight Node.js tool to convert JPG, JPEG, and PNG images to WebP format with customizable quality settings. Significantly reduce image file sizes while maintaining visual quality for faster web performance.

📋 Features

• Convert individual images or entire directories recursively
• Customize output quality (1-100) to balance file size and visual fidelity
• Automatic size comparison to ensure WebP files are smaller than originals
• Detailed conversion reports showing file size reduction percentages
• Simple command-line interface
• Can be used as a library in your Node.js applications

🚀 Installation

Global Installation (CLI usage)

# Install globally
npm install -g webp-image-optimizer

# Now you can use it from anywhere
webp-optimizer ./path/to/images

Local Project Installation

# Add to your project
npm install webp-image-optimizer

# Or with yarn
yarn add webp-image-optimizer

📊 Usage

Command Line Usage

# Convert a single image
webp-optimizer path/to/image.jpg

# Convert a directory of images with default quality (80)
webp-optimizer path/to/directory

# Convert with custom quality setting (1-100)
webp-optimizer path/to/directory 60

# Convert without recursive directory scanning
webp-optimizer path/to/directory 80 false

Using as a Node.js Library

const {
  convertImageToWebP,
  convertDirectoryImages,
} = require("webp-image-optimizer");

// Convert a single image
async function convertSingleImage() {
  try {
    const outputPath = await convertImageToWebP("./image.jpg", 75);
    console.log(`Image converted successfully: ${outputPath}`);
  } catch (error) {
    console.error("Conversion failed:", error);
  }
}

// Convert all images in a directory
async function convertAllImages() {
  try {
    await convertDirectoryImages("./images", 80, true);
    console.log("All images converted successfully");
  } catch (error) {
    console.error("Directory conversion failed:", error);
  }
}

Using NPM Scripts

You can add these scripts to your package.json:

"scripts": {
  "optimize": "webp-optimizer ./images",
  "optimize:60": "webp-optimizer ./images 60",
  "optimize:80": "webp-optimizer ./images 80"
}

🛠️ API Reference

convertImageToWebP(imagePath, quality, compareSize)

Converts a single image to WebP format.

• imagePath (String): Path to the image file
• quality (Number, optional): Quality setting from 1-100, default is 80
• compareSize (Boolean, optional): If true, only saves WebP if smaller than original (default: true)
• Returns: Promise resolving to the output file path

convertDirectoryImages(directoryPath, quality, recursive)

Converts all compatible images in a directory.

• directoryPath (String): Path to the directory
• quality (Number, optional): Quality setting from 1-100, default is 80
• recursive (Boolean, optional): Process subdirectories if true (default: true)
• Returns: Promise that resolves when all conversions are complete

📈 Example Results

Before/after comparison for typical image types:

Image Type	Original Size	WebP Size	Reduction
JPEG photo	1.2 MB	320 KB	73%
PNG icon	45 KB	12 KB	73%
PNG with transparency	280 KB	95 KB	66%

🔍 How It Works

The optimizer uses the Sharp library to process images with the following approach:

• Read the original image file
• Convert to WebP with specified quality
• Compare file sizes
• Keep the WebP version only if it's smaller than the original
• Generate detailed conversion statistics

📄 License

MIT License

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

💖 Acknowledgements

• Sharp - High performance Node.js image processing
• Google for developing the WebP format