2026/7/21
电商产品图用什么格式？JPEG vs WebP vs AVIF 实测对比（附转化率影响）
图片格式WebPAVIFShopify优化电商转化
一个 Shopify 店铺的转化率有多容易被图片格式影响？Google 的数据是：加载速度每慢 1 秒，移动端转化率下降 20%。而产品图通常是店铺页面体积最大的部分——占了总大小的 60-75%。
所以问题不是「要不要优化图片」，而是「用什么格式优化」。
三种格式，一张表看差距
我拿同一张 2400x2400 像素的产品图（一只皮包），分别导出为三种格式，质量设置在「肉眼无差异」档位，结果如下：
| 格式 | 文件体积 | 相比 JPEG 缩小 | 浏览器支持 | Shopify 兼容 |
|---|---|---|---|---|
| JPEG (基线) | 480 KB | — | 100% | 原生支持 |
| WebP | 142 KB | -70% | 97% | 原生支持 |
| AVIF | 98 KB | -80% | 93% | 不支持直接上传 |
结论：WebP 是当前电商产品图的最佳选择——体积只有 JPEG 的 30%，浏览器覆盖 97%，Shopify 原生支持。
为什么不是 AVIF？
AVIF 的压缩率确实更高（比 WebP 再小 30%），但有两个致命问题：
- Shopify 不支持直接上传 AVIF：虽然 Shopify 的 CDN 可以自动转换为 AVIF 渲染，但你无法直接上传 AVIF 源文件
- 处理速度慢：AVIF 编码比 WebP 慢 5-10 倍，批量处理 200 张图时差距很明显
如果你有自己的独立站（非 Shopify），且使用支持 AVIF 的 CDN，可以考虑 AVIF。但对于 99% 的电商卖家，WebP 就够了。
PNG 的尴尬位置
很多产品图是 PNG 格式——尤其是 Logo、图标、透明底产品图。但 PNG 在产品图场景下几乎总是最差选择：
| 场景 | PNG | WebP |
|---|---|---|
| 普通产品图（无透明需求） | 800KB+ | 120KB |
| 透明底产品图 | 600KB | 80KB（WebP 支持透明通道） |
| Logo/图标 | 适合 | 更适合（体积小 60%） |
WebP 支持透明通道，完全可以替代 PNG。除非目标平台强制要求 PNG（极少见），否则全切 WebP。
用 TinyOpt 批量转换格式
如果你有几百张产品图需要从 JPEG/PNG 转成 WebP：
- 打开 TinyOpt「压缩任务」
- 拖入所有产品图
- 输出格式选 WebP
- 可选：设置缩放尺寸（建议 2048x2048 适配）
- 点击开始，等待几分钟
一口气完成压缩 + 格式转换 + 尺寸统一，无需任何中间步骤。
真实测试：一个 Shopify 店铺切换 WebP 前后
| 指标 | 切换前（JPEG） | 切换后（WebP） |
|---|---|---|
| 首页总大小 | 4.8 MB | 1.2 MB |
| 首屏加载时间 | 6.2 秒 | 1.8 秒 |
| PageSpeed 移动端 | 42 分 | 81 分 |
| 跳出率 | 62% | 48% |
这是一个真实的小型服装店铺（80 款产品，约 400 张图）。没有重写代码、没有换主题、没有改 CDN。唯一的变量：用 TinyOpt 把所有产品图重压为 WebP。
实操建议：不同场景推荐格式
| 使用场景 | 推荐格式 | 原因 |
|---|---|---|
| Shopify/Etsy 产品图 | WebP | 体积小，平台支持好 |
| Amazon/eBay 产品图 | JPEG | 平台要求（Amazon 只接受 JPEG/PNG/TIFF） |
| 独立站+现代 CDN | WebP 或 AVIF | CDN 可自动协商最优格式 |
| 社交媒体分享图（Pinterest/Instagram） | JPEG | 兼容性最高，所有平台都支持 |
| Logo/水印素材 | PNG（带透明底） | WebP 透明通道在部分旧软件中不兼容 |