商品详情优化
如何在不损失画质的前提下压缩商品图片
· 4 min read
先把商品图缩放到页面实际显示的像素尺寸,再导出为WebP或AVIF。在视觉质量相同的情况下,它们通常比JPEG小25%到50%。根据图片在页面上的作用,每张图大约控制在100到300KB。Google的Largest Contentful Paint标准把超过2.5秒的页面视为过慢,而一张过大的主图往往是未达标的唯一原因。
用 RorlAI 完成Product: Clean studio backdrop for anything boxed or bottled.为什么文件大小是转化问题,而不只是加载问题
Largest Contentful Paint衡量的是页面上最大的可见元素完整渲染所需的时间。按Google自己的阈值,低于2.5秒为良好,2.5到4秒需要改进,超过4秒为较差。在商品页上,最大的可见元素几乎总是主图。这意味着无论页面其他部分加载得多快,一个过大的图片文件就足以单独决定你的商品页能否达标。
这不是抽象的打分游戏。加载缓慢的主图,是买家在你的商品页上最先体验到的东西,那时他们还没读到描述中的任何一个字,也没看到价格。
现实可行的体积预算
| 图片用途 | 合理目标 |
|---|---|
| 主图(可放大查看) | 150到300KB |
| 副图、相册图或缩略图 | 60到120KB |
| 移动端首屏主图 | 约低于150到200KB |
这些是根据当前图片优化指南整理的工作目标,并非某个平台的官方规范,会随图片本身的复杂度略有不同。白底的简单商品图,在画质损失变得明显之前,可以比复杂场景压缩得更多。因此请把这张表当作上限,而不是必须精确达到的规则。
真正能省下字节的操作顺序
- 1先缩放,再压缩相机或生成工具通常导出3000到4000像素宽的图片。如果照片在你页面上显示在1200像素宽的位置,就先缩放到大约这个宽度。压缩一张过大的图片,送出去的仍然是一张过大的图片,只是稍微小了一点。
- 2在平台支持的情况下导出为WebP在视觉质量相同的情况下,WebP通常比JPEG小25%到35%,AVIF还能更小。当前大多数电商平台和浏览器都支持WebP;请确认你的平台是自动提供WebP,还是需要直接上传该格式的文件。
- 3无法使用WebP时,把JPEG质量设在70到85左右编辑软件的默认导出设置往往高得没有必要。对大多数商品图来说,这个范围内的质量设置在视觉上与原图无法区分,体积却明显小于100%质量的导出。
- 4去掉内嵌的元数据相机参数、页面用不到的色彩配置文件,以及部分手机嵌入的GPS数据,都会增加买家根本看不到的文件体积。大多数压缩工具默认会去掉这些信息,请确认你用的也会。
最重要的区别:
- 无损压缩会原样保留拍摄时的每一个像素,几乎不会缩小照片。它适合色块平整、边缘锐利的图形,不适合摄影照片
- 有损压缩会丢弃人眼难以察觉的数据,照片真正的节省就在这里
- 正确设置的现代编码器,会远远停在买家能察觉差别的水平之下,更早于你自己能察觉的水平
生成或编辑过的图片该怎么处理
无论来自哪种编辑或生成工具,图片都需要和相机直出的照片一样做缩放和压缩。这些工具默认常常按全分辨率导出,而全分辨率的导出存在同样的体积问题,不管像素来自传感器还是模型。请把它当作等待同一体积预算的原始文件,而不是成品素材。
Common questions
- 压缩商品图片会让它们看起来变差吗?
- 设置合理就不会。这里所述范围内的有损压缩,经过调校只会丢弃人眼察觉不到的细节,所以压缩得当的照片在正常查看尺寸下看起来完全一样,而加载时间只有原来的一小部分。
- 应该用WebP,还是继续用JPEG?
- 如果你的店铺平台支持,就用WebP,因为在同等质量下它通常比JPEG小25%到35%。只有当你的平台或主题不会自动提供WebP时,才退回到调好参数的JPEG。
- 手机端和电脑端需要不同尺寸的图片吗?
- 理想情况下需要。手机端买家看图的空间比电脑端小得多,所以在手机端提供更小的文件,能实实在在地节省加载时间,而且在那块屏幕上看不出画质损失。
- 图片文件大小真的会影响销量,还是只影响速度评分?
- 页面速度与转化的关系非常紧密,大多数电商平台现在都把它视为排名和转化因素,而不只是实验室指标。一张单独把页面推过Largest Contentful Paint的2.5秒门槛的主图,是买家真实感受到、可以测量的变慢,而不是抽象的分数。