compress-images

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image Compression Skill

图片压缩技能

Compress all images in

$ARGUMENTS

(or

app/assets/images/content/

if no path provided) to WebP format, optimized for SEO performance (target: under 100KB per image).

将

$ARGUMENTS

（如果未提供路径则为

app/assets/images/content/

）中的所有图片压缩为WebP格式，针对SEO性能进行优化（目标：单张图片小于100KB）。

Process

流程

Create originals folder - Create
```
originals/
```
subfolder inside the target directory and move source files there. Never destroy source files.
Compress each image (JPG, PNG, GIF) from
```
originals/
```
to the parent directory as
```
.webp
```
Iterate until all images are under 100KB - check sizes after each pass, re-compress any that exceed the target
Report results with before/after sizes
Update references in content files from old extensions to
```
.webp
```

创建原始文件文件夹 - 在目标目录内创建
```
originals/
```
子文件夹，并将源文件移动到此处。绝不删除源文件。
压缩每张图片（JPG、PNG、GIF）- 从
```
originals/
```
中读取文件，压缩后以
```
.webp
```
格式保存到父目录
迭代压缩直至所有图片小于100KB - 每次压缩后检查文件大小，重新压缩任何超过目标大小的图片
报告结果，包含压缩前后的文件大小
更新引用 - 将内容文件中对旧格式的引用替换为
```
.webp
```

File Structure

文件结构

target-directory/
├── originals/           # High-quality source files preserved here
│   ├── hero.jpg
│   └── feature.png
├── hero.webp            # Compressed, web-optimized
└── feature.webp

target-directory/
├── originals/           # 高质量源文件保存在此处
│   ├── hero.jpg
│   └── feature.png
├── hero.webp            # 压缩后的网页优化版本
└── feature.webp

Iterative Compression Algorithm

迭代压缩算法

IMPORTANT: Keep compressing until ALL images are under 100KB. Check sizes after each pass and re-compress any that exceed the target.

重要提示： 持续压缩直到所有图片都小于100KB。每次压缩后检查大小，重新压缩任何超过目标的图片。

Step 1: Initial pass (q 70)

步骤1：首次压缩（质量q 70）

bash

cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp  # Check size

bash

cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp  # 检查大小

Step 2: If still over 100KB, reduce quality progressively

步骤2：如果仍超过100KB，逐步降低质量

bash

undefined

bash

undefined

Try these in order until under 100KB:

按以下顺序尝试，直到文件大小低于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

undefined

undefined

Step 3: For stubborn images, also reduce dimensions

步骤3：对于顽固图片，同时缩小尺寸

bash

undefined

bash

undefined

If q 35 at 1200px is still over 100KB, reduce to 1000px:

如果在1200px尺寸、质量q 35时仍超过100KB，缩小到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

undefined

cwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp cwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp

undefined

Real-World Results (Reference)

实际压缩结果（参考）

From actual compression run on content images:

Image	Original	First Try	Final	Settings Used
waves.jpg	198KB	33KB	33KB	q 70, 1200px (1 pass)
calendar.jpg	246KB	42KB	42KB	q 70, 1200px (1 pass)
floating.jpg	230KB	43KB	43KB	q 70, 1200px (1 pass)
cash.jpg	409KB	88KB	88KB	q 70, 1200px (1 pass)
knot.jpg	395KB	96KB	96KB	q 70, 1200px (1 pass)
floating-dark.jpg	414KB	94KB	94KB	q 70, 1200px (1 pass)
keyboard2.jpg	459KB	102KB	102KB	q 70, 1200px (1 pass, acceptable)
perpetual.jpg	565KB	130KB	96KB	q 40, 1200px (3 passes)
keyboard.jpg	718KB	196KB	98KB	q 25, 1000px (5 passes)

以下是对内容图片进行实际压缩后的结果：

图片	原始大小	首次压缩后	最终大小	使用的设置
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次压缩）

Key Insights

关键结论

Most images (under 500KB source) compress fine with default settings (q 70, 1200px)
Large detailed images (500KB+) often need multiple passes
Very large images (700KB+) may need both lower quality AND smaller dimensions
Keyboard/tech photos with fine detail are hardest to compress - expect 4-5 passes
Soft/blurry images compress much better than sharp detailed ones

大多数图片（源文件小于500KB）使用默认设置（q 70, 1200px）即可完成压缩
大尺寸细节丰富的图片（500KB+）通常需要多次压缩
超大图片（700KB+）可能需要同时降低质量和缩小尺寸
键盘/科技类照片细节丰富，最难压缩 - 预计需要4-5次压缩
柔和/模糊的图片比清晰细节多的图片压缩效果好得多

After Compression

压缩完成后

Verify ALL files under 100KB:
```
ls -lh *.webp
```
- re-run compression on any exceeding target
Update content files referencing old extensions (.jpg, .png) to use .webp
Test that images render correctly in the application
Original files remain in
```
originals/
```
folder for future reference or re-compression

验证所有文件均小于100KB：使用
```
ls -lh *.webp
```
命令检查 - 对任何超过目标的图片重新压缩
更新内容文件中对旧格式（.jpg、.png）的引用，改为使用.webp
测试图片在应用中是否正确显示
原始文件保留在
```
originals/
```
文件夹中，以备未来参考或重新压缩