Back to Details

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

流程

  1. Create originals folder - Create 
    originals/
    subfolder inside the target directory and move source files there. Never destroy source files.
  2. Compress each image (JPG, PNG, GIF) from 
    originals/
    to the parent directory as 
    .webp
  3. Iterate until all images are under 100KB - check sizes after each pass, re-compress any that exceed the target
  4. Report results with before/after sizes
  5. Update references in content files from old extensions to 
    .webp
  1. 创建原始文件文件夹 - 在目标目录内创建
    originals/
    子文件夹，并将源文件移动到此处。绝不删除源文件。
  2. 压缩每张图片（JPG、PNG、GIF）- 从
    originals/
    中读取文件，压缩后以
    .webp
    格式保存到父目录
  3. 迭代压缩直至所有图片小于100KB - 每次压缩后检查文件大小，重新压缩任何超过目标大小的图片
  4. 报告结果，包含压缩前后的文件大小
  5. 更新引用 - 将内容文件中对旧格式的引用替换为
    .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
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

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:
ImageOriginalFirst TryFinalSettings Used
waves.jpg198KB33KB33KBq 70, 1200px (1 pass)
calendar.jpg246KB42KB42KBq 70, 1200px (1 pass)
floating.jpg230KB43KB43KBq 70, 1200px (1 pass)
cash.jpg409KB88KB88KBq 70, 1200px (1 pass)
knot.jpg395KB96KB96KBq 70, 1200px (1 pass)
floating-dark.jpg414KB94KB94KBq 70, 1200px (1 pass)
keyboard2.jpg459KB102KB102KBq 70, 1200px (1 pass, acceptable)
perpetual.jpg565KB130KB96KBq 40, 1200px (3 passes)
keyboard.jpg718KB196KB98KBq 25, 1000px (5 passes)
以下是对内容图片进行实际压缩后的结果：
图片原始大小首次压缩后最终大小使用的设置
waves.jpg198KB33KB33KBq 70, 1200px（1次压缩）
calendar.jpg246KB42KB42KBq 70, 1200px（1次压缩）
floating.jpg230KB43KB43KBq 70, 1200px（1次压缩）
cash.jpg409KB88KB88KBq 70, 1200px（1次压缩）
knot.jpg395KB96KB96KBq 70, 1200px（1次压缩）
floating-dark.jpg414KB94KB94KBq 70, 1200px（1次压缩）
keyboard2.jpg459KB102KB102KBq 70, 1200px（1次压缩，符合要求）
perpetual.jpg565KB130KB96KBq 40, 1200px（3次压缩）
keyboard.jpg718KB196KB98KBq 25, 1000px（5次压缩）

Key Insights

关键结论

  1. Most images (under 500KB source) compress fine with default settings (q 70, 1200px)
  2. Large detailed images (500KB+) often need multiple passes
  3. Very large images (700KB+) may need both lower quality AND smaller dimensions
  4. Keyboard/tech photos with fine detail are hardest to compress - expect 4-5 passes
  5. Soft/blurry images compress much better than sharp detailed ones
  1. 大多数图片（源文件小于500KB）使用默认设置（q 70, 1200px）即可完成压缩
  2. 大尺寸细节丰富的图片（500KB+）通常需要多次压缩
  3. 超大图片（700KB+）可能需要同时降低质量和缩小尺寸
  4. 键盘/科技类照片细节丰富，最难压缩 - 预计需要4-5次压缩
  5. 柔和/模糊的图片比清晰细节多的图片压缩效果好得多

After Compression

压缩完成后

  1. Verify ALL files under 100KB: 
    ls -lh *.webp
    - re-run compression on any exceeding target
  2. Update content files referencing old extensions (.jpg, .png) to use .webp
  3. Test that images render correctly in the application
  4. Original files remain in 
    originals/
    folder for future reference or re-compression
  1. 验证所有文件均小于100KB：使用
    ls -lh *.webp
    命令检查 - 对任何超过目标的图片重新压缩
  2. 更新内容文件中对旧格式（.jpg、.png）的引用，改为使用.webp
  3. 测试图片在应用中是否正确显示
  4. 原始文件保留在
    originals/
    文件夹中，以备未来参考或重新压缩