我的 Shopify 商店加载时间为 6.2 秒。谷歌的 PageSpeed 分数为 34。罪魁祸首?每张产品图片平均为 4.5MB。
我知道我需要压缩这些图片。但压缩多少才算过度?什么时候产品照片看起来会影响销售?
我在 12 个类别中对 500 张产品图片测试了从 100% 到 40% 的每个 JPEG 质量设置。以下是我发现的内容。
测试设置
500 张产品图片,类别包括:珠宝、服装、电子产品、化妆品、食品包装、家具、鞋子、包包、手表、太阳镜、护肤品和玩具。
每张图片保存为: 100%、95%、90%、85%、80%、75%、70%、65%、60%、50% 和 40% 的 JPEG 质量。
测量指标: 文件大小、SSIM(结构相似性——视觉质量的数学度量)以及 5 人在 1-5 评分中的主观质量评分。
结果
| 质量 | 平均文件大小 | SSIM 对比 100% | 人类评分(1-5) |
|---|---|---|---|
| 100% | 4.5 MB | 1.000 | 5.0 |
| 95% | 2.1 MB | 0.998 | 5.0 |
| 90% | 1.2 MB | 0.995 | 4.9 |
| 85% | 820 KB | 0.991 | 4.8 |
| 80% | 580 KB | 0.985 | 4.6 |
| 75% | 420 KB | 0.978 | 4.3 |
| 70% | 340 KB | 0.968 | 3.9 |
| 60% | 240 KB | 0.945 | 3.2 |
| 50% | 180 KB | 0.918 | 2.5 |
最佳范围:82-88% 的 JPEG 质量。
在 85% 时,文件大小下降了 82%(从 4.5MB 降到 820KB),而视觉质量几乎与原始图像无法区分。即使在 200% 的放大下,差异也微乎其微。
低于 75% 时,压缩伪影在产品边缘和细微渐变区域(如金属表面或织物纹理)开始显现。
分类特定发现
珠宝和手表对压缩最为敏感。反射表面和细节较小的地方更早出现伪影。对于这些类别使用 88-90%。
服装和织物的敏感性中等。纹理细节(织物图案、缝线)在 80% 时开始退化。服装使用 85% 的质量就可以了。
电子产品和硬件最为宽容。光滑表面和纯色能够很好地压缩。大多数电子产品使用 80% 的质量就可以。
食品包装需要较高的质量以保证文字的可读性。营养标签和成分列表在低于 85% 时容易模糊。食品产品使用 88% 的质量比较好。
WebP vs JPEG
我还测试了 WebP 格式,其压缩性能优于 JPEG:
| 格式 | 质量 | 文件大小 | 视觉质量 |
|---|---|---|---|
| JPEG 85% | — | 820 KB | 4.8/5 |
| WebP 85% | — | 520 KB | 4.8/5 |
| WebP 80% | — | 380 KB | 4.7/5 |
WebP 在 80% 时提供与 JPEG 85% 相同的视觉质量,但文件大小却只有一半。如果你的平台支持 WebP(大多数在 2026 年都支持),请使用它。
对页面速度的影响
在将所有 500 张图片压缩到 JPEG 85% 后:
| 指标 | 压缩前 | 压缩后 |
|---|---|---|
| 平均图片大小 | 4.5 MB | 820 KB |
| 页面加载时间 | 6.2s | 2.1s |
| PageSpeed 分数 | 34 | 78 |
| 跳出率 | 52% | 38% |
| 转化率 | 1.8% | 2.4% |
仅转化率的提高就值得付出努力。页面加载速度更快 = 销售更多。谷歌数据显示,加载时间每改善 100 毫秒,转化率就增加 0.7%。
如何压缩
批量处理
对于批量压缩,我使用两步工作流程:
- 背景去除,使用 pic1.ai — 输出干净的 PNG
- 压缩 — 将 PNG 转换为 JPEG 85% 或 WebP 80%
大多数图像编辑器(Photoshop、GIMP、Affinity Photo)允许你在导出时设置 JPEG 质量。对于批量处理,像 cwebp 或 jpegoptim 这样的命令行工具更快。
特定平台设置
亚马逊: 上传为 JPEG 95%。亚马逊无论如何会重新压缩图片,因此从更高的质量开始可以在他们处理后得到更好的结果。
Shopify: JPEG 85% 或 WebP 80%。Shopify 的 CDN 有效地提供图片,因此适度压缩完全没问题。
Etsy: JPEG 85%。Etsy 的重新压缩不如亚马逊激进。
你自己的网站: WebP 80%,并为旧浏览器设置 JPEG 85% 回退。
避免的一个错误
不要压缩已经压缩过的图像。 如果你从你的列表中下载了一张图片(平台已经压缩过)并再次压缩,质量会显著下降。始终使用原始的未压缩源文件进行工作。
这被称为“代际损失”——每次压缩循环都会引入新的伪影。在进行 3-4 次 JPEG 压缩后,即使在 95% 的质量下,图像也会显得比原始的差得多。
