---

名称: 响应式图片 描述: 生成响应式图片集，包含srcset、WebP/AVIF转换和艺术方向处理 允许使用的工具:

• 读取
• 写入
• 编辑
• Bash
• Glob
• Grep

---

响应式图片技能

目的

生成响应式图片集，以在不同设备上实现最佳性能，包括srcset变体、现代格式转换和艺术方向处理。

能力

• 生成多种分辨率的srcset图片变体
• 转换为WebP和AVIF格式
• 为不同视口计算艺术方向裁剪
• 生成picture元素标记
• 创建响应式图片配置
• 优化图片性能

目标流程

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

集成点

• Sharp用于图片处理
• ImageMagick用于高级转换
• libvips用于高性能操作

输入模式

{
  "type": "object",
  "properties": {
    "inputPath": {
      "type": "string",
      "description": "源图片路径"
    },
    "outputPath": {
      "type": "string",
      "description": "输出目录"
    },
    "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"]
}

输出模式

{
  "type": "object",
  "properties": {
    "generatedImages": {
      "type": "array",
      "description": "生成的图片文件列表"
    },
    "srcset": {
      "type": "string",
      "description": "srcset属性值"
    },
    "pictureMarkup": {
      "type": "string",
      "description": "HTML picture元素标记"
    },
    "sizeSavings": {
      "type": "object",
      "description": "文件大小对比"
    }
  }
}

使用示例

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