Responsive Image Generator

A utility that generates responsive fluid image data for use in modern web applications. The utility should create responsive image sets optimized for different screen sizes and resolutions.

Capabilities

Generate responsive fluid image data

Create a function that generates responsive fluid image data with multiple breakpoints for optimal loading across different devices.

• Given an image path "hero.jpg" and maxWidth 1200, returns fluid image data with srcSet containing multiple breakpoints @test
• Given an image path "banner.png" with custom breakpoints [400, 800, 1600], returns fluid image data with exactly those breakpoint sizes in the srcSet @test
• Given an image path "photo.jpg" with quality 85, returns fluid image data with the specified quality applied @test

Handle responsive image metadata

The generated fluid image data should include all necessary metadata for responsive display.

• Generated fluid data includes base64 placeholder for blur-up effect @test
• Generated fluid data includes aspectRatio preserving original image proportions @test
• Generated fluid data includes sizes attribute for responsive behavior @test

Implementation

@generates

API

/**
 * Generates responsive fluid image data for a given image file.
 *
 * @param {Object} options - Configuration options for generating fluid images
 * @param {string} options.imagePath - Path to the source image file
 * @param {number} [options.maxWidth=800] - Maximum width for the fluid image
 * @param {number[]} [options.srcSetBreakpoints] - Custom breakpoints for srcSet generation
 * @param {number} [options.quality] - Image quality (1-100)
 * @returns {Promise<Object>} Fluid image data including srcSet, sizes, base64, aspectRatio, src
 */
async function generateFluidImageData(options) {
  // IMPLEMENTATION HERE
}

module.exports = {
  generateFluidImageData
};

Dependencies { .dependencies }

gatsby-plugin-sharp { .dependency }

Provides responsive fluid image generation capabilities.

@satisfied-by