image-processing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Image Processing

图片处理

Process images for web development using Pillow (Python). Resize, convert, trim, optimise, and composite — no ImageMagick or native dependencies required.

为Web开发使用Pillow（Python）处理图片。支持调整尺寸、格式转换、去除留白、优化以及合成——无需ImageMagick或原生依赖。

Prerequisites

前置条件

Pillow is usually pre-installed. If not:

bash

pip install Pillow

Pillow通常已预安装。如果未安装：

bash

pip install Pillow

Commands

命令

All commands use

scripts/process-image.py

. Each takes

--output

(

-o

) and optional

--quality

(

-q

所有命令均使用

scripts/process-image.py

。每个命令都接受

--output

（

-o

）参数，以及可选的

--quality

（

-q

）参数。

Resize

调整尺寸

Scale an image to specific dimensions or by width/height (maintains aspect ratio if only one given).

bash

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \
  resize input.png -o resized.png --width 1920 --height 1080

将图片缩放至指定尺寸，或按宽度/高度缩放（若仅指定一个维度，将保持宽高比）。

bash

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \
  resize input.png -o resized.png --width 1920 --height 1080

Width only — height calculated from aspect ratio

仅指定宽度——高度将根据宽高比自动计算

python3 .../process-image.py resize input.png -o resized.png -w 800

undefined

python3 .../process-image.py resize input.png -o resized.png -w 800

undefined

Convert Format

转换格式

Convert between PNG, JPG, WebP. RGBA→JPG automatically composites onto white background.

bash

python3 .../process-image.py convert logo.png -o logo.webp
python3 .../process-image.py convert photo.webp -o photo.jpg -q 90

在PNG、JPG、WebP之间转换。RGBA格式转JPG时会自动合成到白色背景上。

bash

python3 .../process-image.py convert logo.png -o logo.webp
python3 .../process-image.py convert photo.webp -o photo.jpg -q 90

Trim Whitespace

去除留白

Auto-crop surrounding whitespace from logos and icons.

bash

python3 .../process-image.py trim logo-with-padding.png -o logo-trimmed.png

自动裁剪Logo和图标周围的留白。

bash

python3 .../process-image.py trim logo-with-padding.png -o logo-trimmed.png

Thumbnail

生成缩略图

Create a thumbnail fitting within a max dimension (maintains aspect ratio).

bash

python3 .../process-image.py thumbnail product.jpg -o thumb.jpg --size 300

创建一个适配最大尺寸的缩略图（保持宽高比）。

bash

python3 .../process-image.py thumbnail product.jpg -o thumb.jpg --size 300

Optimise for Web

网页优化

Resize + compress in one step. Ideal for preparing uploaded images for production.

bash

python3 .../process-image.py optimise hero.jpg -o hero.webp -w 1920 -q 85

一步完成调整尺寸和压缩。非常适合为生产环境准备上传的图片。

bash

python3 .../process-image.py optimise hero.jpg -o hero.webp -w 1920 -q 85

OG Card

OG卡片

Generate a 1200x630 Open Graph card image with title and subtitle overlay.

bash

undefined

生成1200x630的Open Graph卡片图片，支持叠加标题和副标题。

bash

undefined

With background image

使用背景图片

python3 .../process-image.py og-card
--background hero.jpg
--title "My Page Title"
--subtitle "A brief description"
-o og-image.png

Solid colour background

纯色背景

python3 .../process-image.py og-card
--bg-color "#1a1a2e"
--title "My Page Title"
-o og-image.png

undefined

python3 .../process-image.py og-card
--bg-color "#1a1a2e"
--title "My Page Title"
-o og-image.png

undefined

Common Workflows

常见工作流

Logo Cleanup (client-supplied JPG with white background)

Logo清理（客户提供的带白色背景的JPG）

bash

undefined

bash

undefined

1. Trim whitespace

1. 去除留白

python3 .../process-image.py trim client-logo.jpg -o logo-trimmed.png

2. Convert to PNG (for transparency on non-white backgrounds)

2. 转换为PNG（以便在非白色背景上显示透明效果）

python3 .../process-image.py convert logo-trimmed.png -o logo.png

3. Create favicon-sized version

3. 创建图标尺寸的版本

python3 .../process-image.py thumbnail logo.png -o favicon-source.png --size 512

undefined

python3 .../process-image.py thumbnail logo.png -o favicon-source.png --size 512

undefined

Prepare Hero Image for Production

为生产环境准备首页横幅图

bash

undefined

bash

undefined

Resize to max width, convert to WebP, compress

调整至最大宽度，转换为WebP格式并压缩

python3 .../process-image.py optimise uploaded-hero.jpg -o public/images/hero.webp -w 1920 -q 85

undefined

python3 .../process-image.py optimise uploaded-hero.jpg -o public/images/hero.webp -w 1920 -q 85

undefined

Batch Process (Multiple Images)

批量处理（多张图片）

For batch operations, write a quick script rather than running commands one by one:

python

import subprocess, glob
for img in glob.glob("uploads/*.jpg"):
    name = img.rsplit("/", 1)[-1].replace(".jpg", ".webp")
    subprocess.run(["python3", ".../process-image.py", "optimise", img, "-o", f"public/images/{name}", "-w", "1200", "-q", "85"])

对于批量操作，建议编写简单脚本而非逐个运行命令：

python

import subprocess, glob
for img in glob.glob("uploads/*.jpg"):
    name = img.rsplit("/", 1)[-1].replace(".jpg", ".webp")
    subprocess.run(["python3", ".../process-image.py", "optimise", img, "-o", f"public/images/{name}", "-w", "1200", "-q", "85"])

Pipeline with Gemini Image Gen

与Gemini图片生成工具的流水线集成

Generate → Process → Deploy:

bash

undefined

生成→处理→部署：

bash

undefined

1. Generate with Gemini

1. 使用Gemini生成图片

python3 plugins/design-assets/skills/gemini-image-gen/scripts/generate-image.py
--prompt "..." --output raw-hero.png --count 3

2. User picks favourite (e.g. raw-hero-2.png)

2. 用户选择最喜欢的图片（例如raw-hero-2.png）

3. Optimise for web

3. 为网页优化图片

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py
optimise raw-hero-2.png -o public/images/hero.webp -w 1920 -q 85

undefined

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py
optimise raw-hero-2.png -o public/images/hero.webp -w 1920 -q 85

undefined

Output Format Guide

输出格式指南

Use case	Format	Why
Photos, hero images	WebP	Best compression, wide browser support
Logos, icons (need transparency)	PNG	Lossless, supports alpha
Fallback for older browsers	JPG	Universal support
Thumbnails	WebP or JPG	Small file size priority
OG cards	PNG	Social platforms handle PNG best

使用场景	格式	原因
照片、首页横幅图	WebP	最佳压缩率，广泛的浏览器支持
Logo、图标（需要透明效果）	PNG	无损压缩，支持Alpha通道
旧浏览器兼容方案	JPG	通用支持
缩略图	WebP或JPG	优先保证小文件体积
OG卡片	PNG	社交平台对PNG的兼容性最佳