WebP 图片格式转换优化教程

WebP 是 Google 开发的现代图片格式，在同等视觉质量下比 JPEG 节省 25-35% 的文件大小，比 PNG 节省更多。所有主流浏览器均已支持 WebP 格式。在搬瓦工 VPS 上将图片转换为 WebP 格式并配置 Nginx 自动适配，可以大幅减少图片传输量，加快网站加载速度。

一、安装 WebP 工具

# Ubuntu/Debian
apt update
apt install webp -y

# CentOS
yum install libwebp-tools -y

# 验证安装
cwebp -version
dwebp -version

二、基本转换命令

2.1 JPEG/PNG 转 WebP

# JPEG 转 WebP（质量 80%）
cwebp -q 80 input.jpg -o output.webp

# PNG 转 WebP（有损压缩）
cwebp -q 80 input.png -o output.webp

# PNG 转 WebP（无损压缩）
cwebp -lossless input.png -o output.webp

# 指定输出尺寸
cwebp -q 80 -resize 800 600 input.jpg -o output.webp

2.2 WebP 转回原格式

# WebP 转 PNG
dwebp input.webp -o output.png

# 查看 WebP 文件信息
webpinfo input.webp

三、批量转换

# 批量转换目录下所有 JPEG 文件
for img in /var/www/html/images/*.jpg; do
    cwebp -q 80 "$img" -o "${img%.jpg}.webp"
done

# 批量转换所有 PNG 文件
for img in /var/www/html/images/*.png; do
    cwebp -q 80 "$img" -o "${img%.png}.webp"
done

# 完整的批量转换脚本
cat > /usr/local/bin/convert-webp.sh <<'EOF'
#!/bin/bash
DIR="${1:-.}"
QUALITY="${2:-80}"

find "$DIR" -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | while read img; do
    webp="${img%.*}.webp"
    if [ ! -f "$webp" ] || [ "$img" -nt "$webp" ]; then
        cwebp -q "$QUALITY" "$img" -o "$webp" 2>/dev/null
        orig_size=$(stat -c%s "$img")
        webp_size=$(stat -c%s "$webp")
        saving=$((100 - webp_size * 100 / orig_size))
        echo "Converted: $(basename $img) -> $(basename $webp) (saved ${saving}%)"
    fi
done
EOF
chmod +x /usr/local/bin/convert-webp.sh

# 使用
convert-webp.sh /var/www/html/images 80

四、Nginx 自动适配 WebP

通过 Nginx 配置，浏览器支持 WebP 时自动提供 WebP 版本，不支持时提供原始格式。

4.1 基于 try_files 的方案

# 在 Nginx server 块中添加
map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    # ... 其他配置

    location ~* ^(.+)\.(jpg|jpeg|png)$ {
        # 尝试提供 WebP 版本
        add_header Vary Accept;
        try_files $1$webp_suffix $uri =404;
    }
}

4.2 使用 image_filter 模块实时转换

# 需要编译 Nginx 时包含 image_filter 模块
# 此方案会实时转换，CPU 开销较大，建议配合缓存使用
location ~* ^(.+)\.(jpg|jpeg|png)$ {
    image_filter_webp_quality 80;
    image_filter_buffer 10M;
}

五、使用 ImageMagick 高级处理

# 安装 ImageMagick（支持 WebP）
apt install imagemagick -y

# 转换并调整大小
convert input.jpg -resize 800x600 -quality 80 output.webp

# 批量处理并优化
mogrify -path /var/www/html/webp/ -format webp -quality 80 \
  -resize "1920x1080>" /var/www/html/images/*.jpg

六、质量参数调优

# 对比不同质量参数的文件大小
for q in 60 70 75 80 85 90 95; do
    cwebp -q $q sample.jpg -o "sample-q${q}.webp"
    size=$(stat -c%s "sample-q${q}.webp")
    echo "Quality $q: ${size} bytes"
done

# 推荐参数：
# 照片：quality 75-85
# 图标/Logo：lossless 或 quality 90+
# 缩略图：quality 60-70

七、HTML 中使用 WebP

# 使用 picture 元素实现浏览器兼容
# <picture>
#   <source srcset="image.webp" type="image/webp">
#   <source srcset="image.jpg" type="image/jpeg">
#   <img src="image.jpg" alt="描述文字">
# </picture>

# CSS 中使用（配合 Modernizr 检测）
# .webp .hero { background-image: url('hero.webp'); }
# .no-webp .hero { background-image: url('hero.jpg'); }

八、自动化工作流

# 使用 inotifywait 监控目录自动转换
apt install inotify-tools -y

cat > /usr/local/bin/auto-webp.sh <<'EOF'
#!/bin/bash
WATCH_DIR="/var/www/html/uploads"
QUALITY=80

inotifywait -m -r -e create -e modify --format '%w%f' "$WATCH_DIR" | while read filepath; do
    case "$filepath" in
        *.jpg|*.jpeg|*.png|*.JPG|*.JPEG|*.PNG)
            webp="${filepath%.*}.webp"
            cwebp -q $QUALITY "$filepath" -o "$webp" 2>/dev/null
            echo "Auto-converted: $filepath"
            ;;
    esac
done
EOF
chmod +x /usr/local/bin/auto-webp.sh

# 创建 systemd 服务自动运行
cat > /etc/systemd/system/auto-webp.service <<'EOF'
[Unit]
Description=Auto WebP Converter
After=network.target

[Service]
ExecStart=/usr/local/bin/auto-webp.sh
Restart=always

[Install]
WantedBy=multi-user.target
EOF

systemctl enable auto-webp --now

总结

WebP 格式转换是 Web 图片优化的核心手段，配合 Nginx 自动适配可以无缝地为支持的浏览器提供更小的图片文件。结合 Brotli 压缩和 HTTP/2 升级，可以全面优化搬瓦工 VPS 上网站的传输效率。选购搬瓦工 VPS 请查看全部方案，购买时使用优惠码 NODESEEK2026 可享受 6.77% 的折扣，通过 bwh81.net 访问官网。