Image Thumbnail Generator

Build a simple image thumbnail generator that processes images at multiple sizes for a responsive web application.

Requirements

Create a module that generates multiple thumbnail sizes from a source image. The module should:

1. Process images at three specific widths: 200px, 400px, and 800px
2. Maintain the original aspect ratio when resizing
3. Apply quality settings (quality: 75) to all generated thumbnails
4. Return an array of results containing metadata for each generated thumbnail

API

/**
 * Generates thumbnail images at multiple widths
 * @param {Object} file - Source image file node
 * @param {Object} reporter - Reporter instance for logging
 * @returns {Promise<Array>} Array of thumbnail results with metadata
 */
async function generateThumbnails(file, reporter);

Each result object in the returned array should contain:

• width: The width of the generated thumbnail
• height: The height of the generated thumbnail
• src: Path to the generated thumbnail file
• aspectRatio: The width/height ratio

@generates

Test Cases

• Generates three thumbnails at widths 200px, 400px, and 800px @test
• Returns metadata with correct width, height, src, and aspectRatio for each thumbnail @test
• Maintains aspect ratio when resizing (e.g., 1600x1200 source at 400px width produces 400x300 thumbnail) @test

Dependencies { .dependencies }

gatsby-plugin-sharp { .dependency }

Provides image processing and resizing capabilities.