Responsive Image Skill

Purpose

Generate responsive image sets for optimal performance across devices, including srcset variants, modern format conversion, and art direction.

Capabilities

• Generate srcset image variants at multiple resolutions
• Convert to WebP and AVIF formats
• Calculate art direction crops for different viewports
• Generate picture element markup
• Create responsive image configuration
• Optimize images for performance

Target Processes

• responsive-design.js
• component-library.js

Integration Points

• Sharp for image processing
• ImageMagick for advanced transformations
• libvips for high-performance operations

Input Schema

{
  "type": "object",
  "properties": {
    "inputPath": {
      "type": "string",
      "description": "Path to source image"
    },
    "outputPath": {
      "type": "string",
      "description": "Output directory"
    },
    "widths": {
      "type": "array",
      "items": { "type": "number" },
      "default": [320, 640, 960, 1280, 1920]
    },
    "formats": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["webp", "avif", "jpg"]
    },
    "quality": {
      "type": "number",
      "default": 80
    },
    "artDirection": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "breakpoint": { "type": "number" },
          "crop": { "type": "object" }
        }
      }
    },
    "generateMarkup": {
      "type": "boolean",
      "default": true
    }
  },
  "required": ["inputPath"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "generatedImages": {
      "type": "array",
      "description": "List of generated image files"
    },
    "srcset": {
      "type": "string",
      "description": "srcset attribute value"
    },
    "pictureMarkup": {
      "type": "string",
      "description": "HTML picture element markup"
    },
    "sizeSavings": {
      "type": "object",
      "description": "File size comparison"
    }
  }
}

Usage Example

const result = await skill.execute({
  inputPath: './hero-image.jpg',
  outputPath: './responsive',
  widths: [320, 640, 960, 1280, 1920],
  formats: ['webp', 'avif', 'jpg'],
  generateMarkup: true
});