Responsive Image

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
});