WordPress图片优化：每次都能让PageSpeed达标的配置

我审计了很多WordPress网站。

最大的问题永远都是：图片。

不是图片本身有问题，而是根本没优化。

---

一个真实案例

客户说网站慢。我看PageSpeed：34分。

看了下图片：

• 产品图5MB一张
• 3000像素显示400像素
• 没有任何压缩
• 什么格式都是PNG

我优化了图片。PageSpeed跳到89分。

图片通常占页面重量的60-80%。先搞定图片。

---

我的WordPress工具栈

审计了200多个网站后，我每次都装这几个：

1. ShortPixel Image Optimizer ⭐⭐⭐⭐⭐

第一个要装的插件。

功能：

• 上传时自动压缩
• 自动生成WebP
• 自动生成AVIF
• 批量压缩现有图片
• 有损/无损可选

我的设置：

压缩类型：Glossy（最好平衡）
创建WebP版本：开
创建AVIF版本：开
上传自动优化：开
去除EXIF：开

为什么选Glossy而不是Lossy？ Glossy（接近无损）视觉上跟无损一样，但文件小40-60%。Lossy可能有肉眼可见的痕迹。

获取ShortPixel

---

2. Imagify ⭐⭐⭐⭐½

备选方案。

如果ShortPixel跟主机有冲突，我用Imagify。

设置：

压缩级别：自动（平衡）
上传自动优化：开
创建WebP版本：开

---

3. Cloudflare（或其他CDN）⭐⭐⭐⭐⭐

网站加速神器。

图片不应该从WordPress服务器加载，应该从CDN加载。Cloudflare免费版就很好用。

设置：

Polish：开（自动优化）
WebP：开
Mirage：开

这样Cloudflare会自动：

• 转成WebP
• 进一步压缩
• 边缘节点缓存
• 减轻源服务器压力

---

上传流程

第一步：上传前优化

永远不要直接上传相机原图。

我的上传前清单：

□ 缩到最大2400像素宽（除非需要打印）
□ 检查文件大小——网页用应该在500KB以下
□ 重命名为描述性名称（产品名-1200.jpg）
□ 照片用JPEG，图形用PNG

工具：Imagic AI（免费，不用注册）

---

第二步：上传

装了ShortPixel/Imagify之后，上传就自动处理了。

但有个问题：大图上传和处理都需要时间。

最佳实践： 先缩到~2400像素再上传。别传20MB的RAW文件。

---

第三步：验证

上传后检查：

• 原图被压缩了吗（通常小40-70%）？
• WebP版本生成了吗？
• 画质没问题吧？

检查位置：

• 媒体库 → 点击图片 → 看"原图"vs"已优化"
• ShortPixel后台显示总共节省了多少

---

常见错误

错误1：选错压缩类型

问题： 用Lossy，画质有痕迹。

解决： 换成Glossy或Lossless。先在5张图上测试。

---

错误2：忘记优化现有图片

问题： 只优化了新上传的。

解决： 批量压缩现有媒体：

1. 媒体 → 媒体库
2. 全选图片
3. 批量操作 → "批量优化"
4. 等着（大站可能需要几小时）

---

错误3：忽略缩略图

问题： WordPress会生成多个尺寸的缩略图。

解决： 确保插件压缩了所有尺寸。

---

错误4：CDN没配置

问题： 插件装了，但图片还是慢。

检查：

• Cloudflare激活了吗？（DNS指向Cloudflare）
• Polish开了吗？
• Rocket Loader关了吗？（可能跟某些主题冲突）

---

.htaccess配置（Apache）

用Apache的话，加这个自动提供WebP：

# 有WebP就提供WebP
<IfModule mod_rewrite.c>
    RewriteEngine On

    # 检查浏览器是否支持WebP
    RewriteCond %{HTTP_ACCEPT} image/webp

    # 检查WebP版本是否存在
    RewriteCond %{REQUEST_FILENAME}\.webp -f

    # 提供WebP
    RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

# WebP设置header
<IfModule mod_headers.c>
    <FilesMatch "\.webp$">
        Header set Content-Type "image/webp"
    </FilesMatch>
</IfModule>

# 图片缓存一年
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
</IfModule>

---

Nginx配置

用Nginx的话：

# 有WebP就提供WebP
location ~* \.(jpe?g|png)$ {
    add_header Vary Accept;

    set $webp_uri "";
    set $webp_ext "";

    if ($accept_encoding ~* "webp") {
        set $webp_ext ".webp";
    }

    try_files $uri$webp_ext $uri =404;
}

# 图片缓存一年
location ~* \.(jpe?g|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

---

测试流程

配置完要测试：

1. PageSpeed Insights

pagespeed.web.dev

目标：90+（100分可以做到，但需要的不只是图片）

---

2. 检查实际图片

1. 打开DevTools → Network
2. 刷新页面
3. 筛选图片
4. 看文件类型和大小

好的：

• JPEG/WebP（不是PNG的照片）
• 内容图200KB以下
• 大图400KB以下

坏的：

• 照片用PNG
• 单张图500KB以上
• 原图显示而不是缩小的版本

---

数据说话

这是优化一个电商网站的结果：

优化前：

• 150个产品图
• 平均大小：1.2MB/张
• 页面总重量：180MB
• 加载时间：8.4秒
• PageSpeed：34分

优化后：

• 150个产品图
• 平均大小：95KB/张
• 页面总重量：14MB
• 加载时间：1.8秒
• PageSpeed：94分

结果： 小了92%，快了78%，转化率高25%。

---

发布前检查清单

• [ ] ShortPixel装了并配置好了
• [ ] Cloudflare/CDN开了
• [ ] WebP版本生成了
• [ ] 现有图片批量优化了
• [ ] 图片都在200KB以下
• [ ] 大图在400KB以下
• [ ] 懒加载开了
• [ ] PageSpeed 90+

---

常见问题

Q: 应该用EWWW还是ShortPixel？

A: EWWW也不错，但ShortPixel的WebP/AVIF生成更稳定。我95%的站都用ShortPixel。

---

Q: WP Rocket怎么样？

A: WP Rocket很棒。我用它配合ShortPixel。它处理缓存、压缩、懒加载。ShortPixel处理图片压缩。

---

Q: Cloudflare免费版够用吗？

A: 对大多数网站够。Polish功能会自动优化图片。

---

Q: 怎么看WebP是否生效？

A: 打开DevTools → Network → 筛选图片。看有没有.webp文件。

---

总结

1. 装ShortPixel - 配置一次，一直用
2. 用Cloudflare - 免费而且真的快
3. 别上传5MB图 - 先优化到500KB以下
4. 批量优化现有图片 - 之前的也算
5. 用PageSpeed验证 - 确认真的有效

---

工具

工具	用途
ShortPixel	图片压缩
Cloudflare	CDN和优化
Imagic AI	上传前优化

---

优化了200+个WordPress站。有问题留言。