商品图片压缩指南：清晰度和文件大小怎么取舍，JPEG、PNG、WebP 各用在哪

商品图的文件大小，平时很少有人在意，直到遇到问题：上传时提示“图片超过大小限制”；详情页在手机上加载半天，买家没等到图出来就走了；压缩之后，卖点图上的文字边缘全是毛刺。

图片压缩看起来是技术问题，其实是一连串的取舍。这篇文章讲几个关键决定，帮你在清晰度和文件大小之间找到合适的平衡点。

第一个决定：先定尺寸，再定质量

很多人压缩图片的第一反应是调低质量参数。但影响文件大小最大的因素其实是像素尺寸。一张 4000 × 4000 像素的图，即使质量参数很低，文件也可能比一张 1500 × 1500 像素、质量参数较高的图更大，而且在手机上看不出任何区别。

所以第一步是确定“这张图需要多大”：

原始的高分辨率图片要留档，但上传和展示用的版本按用途缩小。

第二个决定：格式

电商平台通常对上传格式有要求，以平台说明为准，最常用的是 JPEG 和 PNG。平台在展示时一般会自行转换和压缩。自建站、小程序、活动 H5 这类自己控制的页面，用 WebP 能明显减小体积。

一个常见误区：把照片保存成 PNG。照片类内容用 PNG 存储，文件往往是 JPEG 的好几倍，画质却没有肉眼可见的提升。只有需要透明背景或者大面积纯色、线条清晰的图形时才用 PNG。

第三个决定：带文字的图怎么压

卖点图、详情页、海报这类带文字的图片，是压缩最容易出问题的地方。JPEG 压缩会在高对比的边缘产生“振铃”和色块，文字边缘最明显。

几个建议：

• 文字区域不要压太狠：JPEG 质量参数一般不低于 80（不同工具的参数含义略有差异，以实际效果为准）；
• 用 WebP 代替：WebP 在文字边缘的表现通常比同等体积的 JPEG 好；
• 文字不要太小：字号太小的文字，任何压缩都会让它变糊；
• 压缩后放大检查：放大到 100%，重点看文字边缘和纯色背景上有没有色块。

第四个决定：色彩空间

图片保存时，建议统一转换为 sRGB 色彩空间。用 Adobe RGB 或其他色彩空间保存的图片，在网页和手机上显示时颜色可能发灰或偏色。这一点在压缩工具里通常有选项，或者在导出时设置。

缩小之后要适度锐化

把大图缩小时，图像会变得稍微柔和。大多数图像处理工具在缩小后会自动做一点锐化，如果你用的工具没有，可以手动加一点轻微锐化，让商品的边缘和纹理更清楚。注意不要过度，否则会出现白边。

批量处理流程

商品图数量多，逐张处理不现实。一套简单的批量流程：

1. 原图存档：相机原图或生成的高分辨率原图，单独保存，不做任何压缩；
2. 按用途导出：用批量工具按用途导出不同尺寸的版本，比如主图 1600 像素、详情页 750 像素宽、缩略图 600 像素；
3. 统一参数：同一用途的图片使用相同的格式和质量参数；
4. 抽检：每批随机抽几张，放大检查文字和细节；
5. 命名区分：文件名中标明尺寸或用途，避免上传时用错版本。

自建站和小程序：加载速度

如果你有自建站、小程序或活动页面，图片通常是页面体积中最大的部分。几个优化方向：

• 响应式图片：为不同屏幕尺寸提供不同尺寸的图片，手机不加载桌面端的大图；
• 懒加载：首屏之外的图片在滚动到时再加载；
• 首屏图片优先：首屏的主图不要懒加载，并且尽量压缩，它决定了页面“看起来加载完”的速度；
• 使用 CDN：图片放在 CDN 上，并开启自动格式转换（如果服务商支持）。

一个常见场景：详情页上传失败

很多商家遇到过详情页图片上传失败、提示文件过大的情况。排查顺序建议是：先看像素尺寸是不是远超平台需要（比如设计稿导出成了 3000 像素宽），按平台要求的宽度重新导出；再看格式，照片类内容是否误存成了 PNG；最后才调整质量参数。按这个顺序处理，大多数情况下不需要牺牲清晰度。

原图不够清晰怎么办

压缩解决的是“太大”，但有时候问题是原图“不够”：分辨率太低、有噪点、有模糊。这种情况下，先用 高清放大 或 变清晰 修复，再按上面的流程压缩。顺序不能反：先压缩再放大，压缩产生的瑕疵会被一起放大。

大批量白底图的处理流程，可以参考 200 个 SKU 的白底图怎么批量做。