极致压图
电商图片

电商商品图片怎么压缩,才能兼顾速度与细节?

商品页加载慢会流失访客,商品图糊了又会流失信任。电商图片的关键不是找一个“最好的”压缩设置,而是按图片在页面上的位置分别处理。

按展示位置分三组

列表页需要快速浏览,主图需要建立信任,细节图需要放大。只保留一张超大原图让前端缩小,会浪费传输;只保留一张小图又会破坏放大体验。

用途档位最长边输出格式
列表缩略图均衡(JPEG 质量 75)800pxWebP 或 JPEG
商品主图均衡,或智能自动(画质相似度目标 95%)1920pxWebP 或 JPEG
细节放大图高质量(JPEG 质量 90)2560pxJPEG 或 WebP
透明背景抠图高质量(PNG 不量化)或均衡(PNG 量化质量 80)按模板尺寸保持 PNG

最长边设置只会缩小,不会放大:原图比设定值小时保持原样。

格式由内容决定

摄影商品图适合 JPEG、WebP 或 AVIF;透明抠图、尺寸表和带小字的促销信息更适合 PNG。不要为了格式统一而牺牲透明边缘与文字锐度。

压缩时重点看什么

白底商品容易在轮廓周围出现光晕,织物和珠宝容易损失纹理,渐变包装容易出现色带。抽样时要覆盖最难压的 SKU,而不是只看一张简单产品。

  • 在白色与深色背景各看透明边缘。智能自动档在判断透明图画质时,也会同时在白底和黑底上比较,因为光晕只在其中一种底色上明显。
  • 放大检查材质与反光。
  • 对照品牌色和包装文字。颜色配置会被保留,所以颜色偏差通常来自过度压缩,而不是色彩空间丢失。

一批商品图出三种规格

  1. 把一批商品母版放进一个文件夹,拖进页面,选“均衡”和最长边 800px,打包下载列表图。
  2. 把尺寸改成 1920px,点“用当前设置重新压缩全部”,下载主图包。
  3. 切到“高质量”、2560px,再重新压缩一次,下载细节图包。
  4. 整个过程文件只拖入一次,都在浏览器里处理,不会上传到服务器。

建立可复用的出口规范

记录每个展示位置的像素、格式、命名和档位。新品只需进入相同流程,旧图则优先处理流量高、体积大的页面。极致压图会记住你上次在这个浏览器里用的设置,下次打开不必重新选。

参考资料

现在处理你的文件

文件只在当前浏览器中处理,不会作为文章示例上传到服务器。

打开图片压缩工具