关于 compress-images
将目标目录中的图像转换为 WebP 的技能，会保留原文件并以单个文件低于 100KB 为目标；还会更新内容引用并报告压缩前后的大小。
主要功能
- 01将 JPG、PNG 和 GIF 转为 WebP
- 02在 originals/ 中保留源文件
- 03迭代压缩并以低于 100KB 为目标
- 04更新内容中的图像引用
- 05报告文件大小变化
适用场景
- 01为网页准备图像
- 02减小图像文件体积
- 03将内容引用替换为 WebP 路径
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/compress-images确认已加载。
详细介绍
图像压缩技能
将 $ARGUMENTS 中的所有图像（如果未提供路径，则使用 app/assets/images/content/）压缩为 WebP 格式，以优化 SEO 性能（目标：每张图像小于 100KB）。
流程
- 创建原始文件夹 - 在目标目录中创建
originals/子文件夹，并将源文件移入其中。切勿销毁源文件。 - 压缩每张图像（JPG、PNG、GIF）- 将
originals/中的图像压缩为.webp，保存到父目录 - 反复压缩，直到所有图像都小于 100KB - 每轮压缩后检查文件大小，重新压缩所有超出目标的图像
- 报告结果，列出压缩前后的大小
- 更新引用，将内容文件中的旧扩展名改为
.webp
文件结构
target-directory/
├── originals/ # High-quality source files preserved here
│ ├── hero.jpg
│ └── feature.png
├── hero.webp # Compressed, web-optimized
└── feature.webp
迭代压缩算法
重要： 持续压缩，直到所有图像都小于 100KB。每轮压缩后检查文件大小，并重新压缩所有超出目标的图像。
步骤 1：初始压缩（q 70）
cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp # Check size
步骤 2：如果仍超过 100KB，则逐步降低质量
# Try these in order until under 100KB:
cwebp -q 60 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 50 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 45 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 40 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 35 -resize 1200 0 originals/image.jpg -o image.webp
步骤 3：对于难以压缩的图像，同时缩小尺寸
# If q 35 at 1200px is still over 100KB, reduce to 1000px:
cwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp
cwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp
实际结果（参考）
以下是对内容图像进行实际压缩的结果：
| 图像 | 原始大小 | 首次尝试 | 最终大小 | 使用的设置 |
|---|---|---|---|---|
| waves.jpg | 198KB | 33KB | 33KB | q 70、1200px（1 轮） |
| calendar.jpg | 246KB | 42KB | 42KB | q 70、1200px（1 轮） |
| floating.jpg | 230KB | 43KB | 43KB | q 70、1200px（1 轮） |
| cash.jpg | 409KB | 88KB | 88KB | q 70、1200px（1 轮） |
| knot.jpg | 395KB | 96KB | 96KB | q 70、1200px（1 轮） |
| floating-dark.jpg | 414KB | 94KB | 94KB | q 70、1200px（1 轮） |
| keyboard2.jpg | 459KB | 102KB | 102KB | q 70、1200px（1 轮，可接受） |
| perpetual.jpg | 565KB | 130KB | 96KB | q 40、1200px（3 轮） |
| keyboard.jpg | 718KB | 196KB | 98KB | q 25、1000px（5 轮） |
关键经验
- 大多数图像（源文件小于 500KB）使用默认设置（q 70、1200px）即可顺利压缩
- 细节丰富的大图像（500KB 以上）通常需要多轮压缩
- 超大图像（700KB 以上）可能既需要降低质量，也需要缩小尺寸
- 键盘／科技类照片细节丰富，最难压缩——预计需要 4～5 轮
- 柔和／模糊的图像比清晰、细节丰富的图像更容易压缩
压缩后
- 确认所有文件都小于 100KB：
ls -lh *.webp——对任何超过目标的文件重新运行压缩 - 将内容文件中引用的旧扩展名（.jpg、.png）改为 .webp
- 测试图像在应用程序中能否正确显示
- 原始文件会保留在
originals/文件夹中，供日后参考或重新压缩
评论
支持 Markdown