Image Format Optimizer

Build an image optimization tool that converts input images to multiple output formats with format-specific compression settings to minimize file size while maintaining acceptable quality.

Background

Different image formats have different strengths: JPEG excels at photographs, PNG handles transparency well, WebP offers better compression than JPEG, and AVIF provides the best compression ratios. Modern web applications serve multiple formats to maximize browser compatibility while optimizing performance.

Requirements

Create a Node.js module (src/optimizer.js) with a function processImage(inputPath, outputDir) that:

1. Takes an input image file path and output directory path as parameters
2. Generates optimized versions of the image in four formats: JPEG, PNG, WebP, and AVIF
3. Applies format-specific optimizations:
   • JPEG: Enable progressive encoding and use quality level 50
   • PNG: Use compression level 9 (maximum compression)
   • WebP: Use quality level 50
   • AVIF: Use quality level 50
4. Resizes all output images to 800 pixels wide (maintaining aspect ratio)
5. Returns a JavaScript object containing the original image info and details about all generated images

Return Value Structure

The function should return an object with this structure:

{
  original: {
    path: "path/to/original.jpg",
    format: "jpeg",
    width: 2000,
    height: 1500
  },
  optimized: [
    {
      format: "jpeg",
      path: "output/image.jpg",
      size: 125430,
      width: 800,
      height: 600
    },
    {
      format: "png",
      path: "output/image.png",
      size: 450120,
      width: 800,
      height: 600
    },
    {
      format: "webp",
      path: "output/image.webp",
      size: 98760,
      width: 800,
      height: 600
    },
    {
      format: "avif",
      path: "output/image.avif",
      size: 67890,
      width: 800,
      height: 600
    }
  ]
}

Implementation Notes

• The function should handle common image formats as input (JPEG, PNG, WebP, AVIF)
• Create the output directory if it doesn't exist
• Preserve the original filename (without extension) for output files
• File sizes should be in bytes
• The function should be async and return a Promise

Dependencies { .dependencies }

gatsby-plugin-sharp { .dependency }

Provides image processing and format conversion capabilities with format-specific optimization options.

Test Cases

Create tests in src/optimizer.test.js using your preferred testing framework.

Test 1: Basic Format Conversion { @test }

Given: A sample JPEG image (1200x900 pixels) at test-images/photo.jpg

When: Calling processImage('test-images/photo.jpg', 'output/')

Then:

• Four files are created: output/photo.jpg, output/photo.png, output/photo.webp, output/photo.avif
• The returned object contains original image info with correct dimensions
• The returned object contains four optimized entries, one for each format
• All optimized images have width of 800px and height of 600px
• Each entry includes the correct format, valid file path, and file size in bytes

Test 2: Format-Specific Compression { @test }

Given: A sample PNG image at test-images/sample.png

When: Calling processImage('test-images/sample.png', 'output/')

Then:

• The JPEG output uses progressive encoding
• The PNG output uses compression level 9
• File sizes reflect the format-specific optimizations (can verify by comparing to unoptimized conversions)

Test 3: Large Image Resizing { @test }

Given: A large image (3000x2000 pixels) at test-images/large.jpg

When: Calling processImage('test-images/large.jpg', 'output/')

Then:

• All output images are resized to 800px width (533px height to maintain aspect ratio)
• All four formats are generated successfully
• File sizes are reasonable (AVIF and WebP typically smaller than JPEG for photographic content)