关于 optimize-images
Optimize Images 是一项用于处理指定目录中 JPG、JPEG 和 PNG 文件的技能，面向网页交付。它可生成多种尺寸的 WebP、方形缩略图、模糊占位图，并报告体积节省情况。
主要功能
- 01查找 JPG、JPEG 和 PNG 文件
- 02生成多种宽度的 WebP 图片
- 03创建方形缩略图
- 04生成 base64 模糊占位图
- 05报告处理数量与体积统计
适用场景
- 01准备供网页使用的公开图片目录
- 02生成响应式图片变体
- 03创建缩略图和模糊占位图
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/optimize-images确认已加载。
详细介绍
优化图片
优化指定目录中的图片，以便通过 Web 交付。
参数
$ARGUMENTS- 包含待优化图片的目录路径（默认值：./public/images）
流程
- 查找所有图片：
find ${ARGUMENTS:-./public/images} -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) - 为每张图片生成：
- 宽度为 320、640、1280、1920、2560 像素的 WebP 版本
- 尺寸为 150x150、300x300 的缩略图
- 模糊占位图（宽度为 10px，采用 base64 编码）
命令
# Install sharp-cli if not present
pnpm add -D sharp-cli
# Optimize single image example
npx sharp -i input.jpg -o output.webp --format webp --quality 80
# Generate srcset for an image
for size in 320 640 1280 1920 2560; do
npx sharp -i input.jpg -o "output-${size}w.webp" --resize $size --format webp --quality 80
done
# Generate thumbnail
npx sharp -i input.jpg -o thumb-150.webp --resize 150 150 --fit cover --format webp
# Generate blur placeholder
npx sharp -i input.jpg -o blur.webp --resize 10 --format webp --quality 20
输出
报告以下内容：
- 处理的图片数量
- 原始总大小
- 优化后总大小
- 节省的大小百分比
评论
支持 Markdown