Image Optimization Build Plugin

Build a plugin for a frontend build tool that automatically optimizes image files during the build process by converting them to WebP format and generating responsive variants.

Requirements

Core Functionality

The plugin should intercept image files (.png, .jpg, .jpeg) during the build process and generate optimized output. For each input image, the plugin should:

1. Convert the original image to WebP format
2. Create three responsive variants: thumbnail (150px wide), medium (600px wide), and original size
3. Output a JavaScript module that exports metadata about the generated images

Image Processing

For an input file photo.jpg, the plugin should:

• Generate photo.webp (original size in WebP format)
• Generate photo-thumb.webp (150px wide, maintaining aspect ratio)
• Generate photo-medium.webp (600px wide, maintaining aspect ratio)
• Generate photo.js (a JavaScript module with metadata)

The JavaScript module should export an object with this structure:

export default {
  original: "/path/to/photo.webp",
  thumbnail: "/path/to/photo-thumb.webp",
  medium: "/path/to/photo-medium.webp",
  width: 1920,    // original width
  height: 1080     // original height
}

Plugin Configuration

The plugin should accept configuration options:

• sizes: Array of responsive sizes to generate (default: [150, 600])
• quality: WebP quality setting (default: 80)
• skipOptimization: Boolean to bypass optimization in certain build modes (default: false)

Build Integration

The plugin must integrate with the build tool's lifecycle to:

• Process files during the appropriate build phase
• Handle both development and production modes
• Support file watching in development mode

Test Cases

• Processing a PNG file generates WebP output and responsive variants @test
• Processing a JPEG file generates WebP output and responsive variants @test
• The generated JavaScript module exports correct image metadata @test
• Plugin respects custom size configuration @test

Implementation

@generates

API

/**
 * Creates an image optimization plugin
 *
 * @param {Object} options - Plugin configuration
 * @param {number[]} options.sizes - Array of responsive sizes to generate (default: [150, 600])
 * @param {number} options.quality - WebP quality setting (default: 80)
 * @param {boolean} options.skipOptimization - Skip optimization in certain modes (default: false)
 * @returns {Object} Plugin instance with name and hooks
 */
function imageOptimizationPlugin(options = {}) {
  // Implementation here
}

module.exports = imageOptimizationPlugin;

Dependencies { .dependencies }

snowpack { .dependency }

A frontend build tool with plugin system support.

sharp { .dependency }

Provides high-performance image processing capabilities.