电商商品图片怎么压缩,才能兼顾速度与细节?
商品页加载慢会流失访客,商品图糊了又会流失信任。电商图片的关键不是找一个“最好的”压缩设置,而是按图片在页面上的位置分别处理。
按展示位置分三组
列表页需要快速浏览,主图需要建立信任,细节图需要放大。只保留一张超大原图让前端缩小,会浪费传输;只保留一张小图又会破坏放大体验。
| 用途 | 档位 | 最长边 | 输出格式 |
|---|---|---|---|
| 列表缩略图 | 均衡(JPEG 质量 75) | 800px | WebP 或 JPEG |
| 商品主图 | 均衡,或智能自动(画质相似度目标 95%) | 1920px | WebP 或 JPEG |
| 细节放大图 | 高质量(JPEG 质量 90) | 2560px | JPEG 或 WebP |
| 透明背景抠图 | 高质量(PNG 不量化)或均衡(PNG 量化质量 80) | 按模板尺寸 | 保持 PNG |
最长边设置只会缩小,不会放大:原图比设定值小时保持原样。
格式由内容决定
摄影商品图适合 JPEG、WebP 或 AVIF;透明抠图、尺寸表和带小字的促销信息更适合 PNG。不要为了格式统一而牺牲透明边缘与文字锐度。
压缩时重点看什么
白底商品容易在轮廓周围出现光晕,织物和珠宝容易损失纹理,渐变包装容易出现色带。抽样时要覆盖最难压的 SKU,而不是只看一张简单产品。
- 在白色与深色背景各看透明边缘。智能自动档在判断透明图画质时,也会同时在白底和黑底上比较,因为光晕只在其中一种底色上明显。
- 放大检查材质与反光。
- 对照品牌色和包装文字。颜色配置会被保留,所以颜色偏差通常来自过度压缩,而不是色彩空间丢失。
一批商品图出三种规格
- 把一批商品母版放进一个文件夹,拖进页面,选“均衡”和最长边 800px,打包下载列表图。
- 把尺寸改成 1920px,点“用当前设置重新压缩全部”,下载主图包。
- 切到“高质量”、2560px,再重新压缩一次,下载细节图包。
- 整个过程文件只拖入一次,都在浏览器里处理,不会上传到服务器。
建立可复用的出口规范
记录每个展示位置的像素、格式、命名和档位。新品只需进入相同流程,旧图则优先处理流量高、体积大的页面。极致压图会记住你上次在这个浏览器里用的设置,下次打开不必重新选。
参考资料
现在处理你的文件
打开图片压缩工具
文件只在当前浏览器中处理,不会作为文章示例上传到服务器。