网站图片压缩和WebP转换教程：提升加载速度必备

为什么要压缩图片

图片通常占网页总体积的 60%-80%。一张未压缩的 1920×1080 PNG 截图可能有 2-3MB，加载时间直接影响用户体验和 SEO 排名。Google PageSpeed Insights 经常把”优化图片”列为首要建议。

压缩图片的两个方向：

• 减小文件体积：压缩质量、去除元数据
• 转换格式：PNG/JPG 转 WebP，体积再减 25%-35%

命令行工具：ImageMagick

安装

# Ubuntu/Debian
apt install imagemagick -y

# CentOS
yum install ImageMagick -y

压缩 JPG

# 质量压缩到 80%（肉眼几乎看不出区别）
convert input.jpg -quality 80 output.jpg

# 批量压缩当前目录所有 JPG
for f in *.jpg; do convert "$f" -quality 80 "compressed_$f"; done

# 调整尺寸 + 压缩（宽度限制 1200px）
convert input.jpg -resize 1200x -quality 80 output.jpg

压缩 PNG

# 压缩 PNG
convert input.png -strip -quality 85 output.png

# -strip 去除 EXIF 元数据，可以减小几 KB 到几十 KB

转 WebP

# 转换为 WebP（质量 80）
convert input.jpg -quality 80 output.webp

# 批量转换
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

专用工具：cwebp / jpegoptim / pngquant

cwebp（WebP 转换工具）

# 安装
apt install webp -y

# 转换单张
cwebp -q 80 input.jpg -o output.webp

# 批量转换
find . -name "*.jpg" -exec sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {} \;

jpegoptim（JPG 专用优化）

# 安装
apt install jpegoptim -y

# 压缩到指定大小以内（KB）
jpegoptim --max=200 input.jpg

# 设置质量
jpegoptim --size=80 input.jpg

# 批量压缩
find . -name "*.jpg" -exec jpegoptim --max=200 {} \;

pngquant（PNG 专用压缩）

# 安装
apt install pngquant -y

# 压缩 PNG
pngquant --quality=65-80 input.png -o output.png

# 批量压缩
find . -name "*.png" -exec pngquant --quality=65-80 --force --ext .png {} \;

TinyPNG API 在线压缩

TinyPNG 提供免费 API（每月 500 次压缩），压缩效果很好：

# 安装 Python 包
pip install tinify

# 压缩图片
import tinify
tinify.key = "YOUR_API_KEY"  # 从 tinypng.com 申请

source = tinify.from_file("input.jpg")
source.to_file("output.jpg")

# 转 WebP
source = tinify.from_file("input.jpg")
converted = tinify.from_buffer(source.to_buffer())
with open("output.webp", "wb") as f:
    f.write(converted.to_buffer())

WordPress 图片优化插件

1. ShortPixel（推荐）

• 支持有损/无损/三种压缩模式
• 自动转 WebP 并在前端提供 WebP 版本
• 免费版每月 100 张图片
• 付费版 $4.99/月起，10000 张
• 安装：后台「插件」→「安装插件」→ 搜索 “ShortPixel”

2. Imagify

• WP Rocket 团队出品
• 支持 WebP 转换
• 免费版每月 20MB
• 和 WP Rocket 缓存插件配合使用效果最好

3. Smush

• 最流行的图片压缩插件之一
• 免费版无限压缩（但单张不能超过 5MB）
• 支持懒加载（Lazy Load）
• Pro 版支持 WebP 和 CDN

4. WebP Express

• 专注于 WebP 转换
• 完全免费，自托管
• 自动为支持 WebP 的浏览器提供 WebP 版本
• 需要服务器支持 WebP（装 cwebp 或 gd 库）

前端懒加载

懒加载让图片只在滚动到可见区域时才加载，减少首屏加载时间：

原生懒加载（推荐）

<img src="image.jpg" loading="lazy" alt="描述文字" />

现代浏览器（Chrome 77+、Firefox 75+）原生支持，不需要 JavaScript。

WordPress 设置

WordPress 5.5+ 默认给图片加了 loading="lazy"，不需要额外设置。如果你的版本较老，可以装 “a3 Lazy Load” 插件。

Nginx 层面的图片优化

# 开启 gzip 压缩（对 SVG 有效）
gzip on;
gzip_types image/svg+xml;

# 设置浏览器缓存（图片缓存 30 天）
location ~* \.(jpg|jpeg|png|gif|webp|ico)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# 自动 WebP 转换（需要 ngx_pagespeed 模块）
# 如果 Nginx 编译了 pagespeed：
pagespeed on;
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;

实际效果对比

可以看到 WebP 转换后体积通常减少 50% 以上。

自动化方案

写一个脚本在图片上传时自动压缩：

#!/bin/bash
# compress.sh - 自动压缩目录下的图片

DIR="$1"
QUALITY=80

# 压缩 JPG
find "$DIR" -name "*.jpg" -o -name "*.jpeg" | while read f; do
    jpegoptim --max="$((QUALITY))" "$f"
    cwebp -q "$QUALITY" "$f" -o "${f%.*}.webp"
    echo "Compressed: $f"
done

# 压缩 PNG
find "$DIR" -name "*.png" | while read f; do
    pngquant --quality=65-80 --force --ext .png "$f"
    cwebp -q "$QUALITY" "$f" -o "${f%.*}.webp"
    echo "Compressed: $f"
done

echo "Done!"

用法：bash compress.sh /path/to/images

常见问题

Q1：WebP 图片在某些浏览器不显示

• WebP 支持率已超过 97%（2024年数据），Safari 14+ 支持
• 如果需要兼容老浏览器，用 <picture> 标签做降级：

  <picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="描述">
  </picture>

Q2：压缩后图片模糊

• JPG 质量不要低于 70
• PNG 用 pngquant 时 quality 设 65-80
• 照片类用有损压缩效果好，图标/截图用无损压缩

Q3：WordPress 上传图片时自动压缩怎么实现

• 装 ShortPixel 或 Imagify 插件，上传时自动压缩
• 或者用 hook：add_action('wp_handle_upload', 'compress_uploaded_image')

小结

图片优化是提升网站速度最有效的手段。命令行用 ImageMagick + cwebp 最灵活，WordPress 用户推荐 ShortPixel 插件。关键原则：JPG 质量 75-85、转 WebP、开启懒加载、设置浏览器缓存。

来源：

• Google 图片优化指南
• web.dev 快速图片加载
• ShortPixel 官网