optimize-images

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Optimize Images

图片优化

Optimize images in the specified directory for web delivery.

优化指定目录中用于网页交付的图片。

Arguments

参数

```
$ARGUMENTS
```
- Directory path containing images to optimize (default:
```
./public/images
```
)

```
$ARGUMENTS
```
- 包含待优化图片的目录路径（默认值：
```
./public/images
```
）

Process

处理流程

Find all images:

bash

find ${ARGUMENTS:-./public/images} -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \)

For each image, generate:
- WebP versions at 320w, 640w, 1280w, 1920w, 2560w
- Thumbnail at 150x150, 300x300
- Blur placeholder (10px width, base64)

查找所有图片：

bash

find ${ARGUMENTS:-./public/images} -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \)

对每张图片，生成：
- 320w、640w、1280w、1920w、2560w分辨率的WebP版本
- 150x150、300x300尺寸的缩略图
- 模糊占位符（宽度10px，base64格式）

Commands

命令

bash

undefined

bash

undefined

Install sharp-cli if not present

如果未安装sharp-cli则进行安装

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

为图片生成srcset

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

undefined

npx sharp -i input.jpg -o blur.webp --resize 10 --format webp --quality 20

undefined

Output

输出

Report:

Number of images processed
Original total size
Optimized total size
Size savings percentage

报告内容：

已处理图片数量
原始总大小
优化后总大小
空间节省百分比