商品图上传后变模糊：像素到底丢在了哪一步

商品图上传后变模糊，几乎从来不是相机的问题。离开你电脑的那个文件是清晰的，买家手机上真正下载到的那个文件已经不是它了——中间被重采样、重新编码、按上限截顶、再重新分发，通常来回四五次，而这些系统调优的目标是页面速度，不是你的尺寸标注。

没有人会主动上传一张模糊的图。清晰度不是在上传那一刻丢的，而是一步一步被花掉的，其中大部分环节在卖家后台里根本看不见。下面先用一张表把整条链路摆出来，再讲代价最大的三个环节该怎么处理。

商品图上传后变模糊：八个环节，按顺序拆

环节 1 和 2 是你的。环节 4 和 5 属于平台，没得商量。实际当中，绝大多数关于商品图上传后变模糊的抱怨都能追到 3、4、7 这三步——编码、二次编码、屏幕——这也正是为什么重拍一次基本解决不了问题。

环节 3：色度抽样，是你那根红色尺寸箭头最先阵亡的原因

色度抽样是 JPEG 编码的一种取巧做法：亮度按全分辨率存，颜色只存其中一小部分——在常见的 4:2:0 模式下，每 2×2 个像素块只取一个颜色采样。亮度细节保住了，颜色细节在文件还没离开你电脑之前就已经被砍到四分之一。

对一张沙发照片来说，这笔交易划算。对一根画在灰色板材上的一像素红色箭头来说，这笔交易糟透了：中红压中灰，两者的亮度几乎没有差别，这根线的可见度几乎全靠色相撑着——而色相恰恰是编码器第一个扔掉的通道。线不会消失，它会晕成一道两像素宽的粉色淤痕，箭头尖也不再是尖的。

解法不是把质量滑块往上推。解法是让标注赢在亮度上，而不是赢在颜色上：

• 浅底用深色线，深底用浅色线。反差要落在亮度上，不是色相上。
• 给线条加一圈细的对比描边或者光晕，让边缘熬得过 2×2 的颜色平均。
• 尺寸文字在交付尺寸下至少要有 2 px 粗，而不是在母版尺寸下。
• 别把高饱和的红字蓝字直接压在中间调的产品上。这两个色相最先崩。

环节 4：没人看得见的那次二次编码

每个平台都会把你上传的图解码，然后写一份自己的副本。JPEG 是有损的，所以第二次编码不只是把第一次的误差再犯一遍——它量化的是一张已经带着压缩伪影的图，而那些伪影会被当成"值得保留的细节"来对待。看得见的结果就是振铃：每条硬边缘两侧贴着一层淡淡的光晕，在白底黑字和规格图的直线上最明显。

这个你关不掉。你能做的是别再喂它已经受损的输入：

• 留一份无损母版（PNG、TIFF 或者带图层的原始文件）。永远不要打开导出好的 JPEG 再存一次。
• 一次导出，从母版出发，直接导到最终像素尺寸。中间每存一次 JPEG，都是一代要你付账的损失。
• 不要为了凑某个文件体积指标而提前压一遍——平台自己的上限已经在管这件事了。

从环节 3 和 4 能推出一条规则：一张商品图被 JPEG 编码了几次，比任何一次编码时质量滑块拉到多少更要紧。

环节 5：让缩放功能还活着的那条像素下限

缩放是买家用来确认规格看不看得清的功能，而每个平台都给它设了像素门槛。够不到这个门槛，图不是"模糊"，而是压根就没有一份高分辨率版本可以拿出来给它。

由此有两点。第一，上传一个体积更大的文件，并不会凭空补出你从来没拍到的分辨率——这跟 300 DPI 与 72 DPI 之争 背后是同一个误会：把文件头里存的一个数字当成了图像细节。第二，按平台上限导出通常不花额外成本，而且总是比按你店铺主题当前恰好显示的尺寸导出更安全。

环节 7：高密度屏上那笔 2 倍的税

设备像素比，指的是浏览器用多少个物理屏幕像素去渲染一个 CSS 像素。现在的手机普遍报 2 或者 3。一张 1,000 像素的图放进一个 500 CSS 像素宽的展示位，在老笔记本上看很锐，在手机上就明显发虚——因为手机要的是 1,500 个像素，拿到的只有 1,000 个。

这是卖家说"我自己显示器上看着挺好啊"最常见的原因。你显示器上确实挺好。你的显示器要的像素，比买家手机要的少。在你判定这个文件没问题之前，每一张商品图都要拿手机按 100% 看一遍。

裁切会让情况更糟。如果平台展示位的形状和你导出的比例不一样，图里最锐的那部分可能在被缩放之前就已经被切掉了——这是另一种失效，但落到眼睛里和发虚长得一模一样。那是另一个要单独做的决定，写在 商品图长宽比 这篇里。

按回报高低排序，该改哪些

1. 按平台上限、从无损母版、一次性导出。 单项收益最大，而且不花钱。
2. 动质量滑块之前，先修标注的反差。 亮度反差扛得过每一次编码，色相扛不过。
3. 缩放之后再锐化，绝不能反过来。 先锐化 6,000 px 母版再缩小，等于把锐化扔了，还额外送你一圈光晕。
4. 别再让 JPEG 来回倒腾。 每一个交付尺寸，都只从母版导出一次。
5. 在手机上验收。 不是在桌面预览里，也不是在上传弹窗里。

还有一个杠杆，位置比上面这些都更靠上游：标注一开始是怎么做出来的。尺寸线和规格文字如果是按几何图形绘制、并且直接按交付像素尺寸导出一次，它们能扛过平台的二次编码，因为它们是硬边缘、高亮度反差、按原生分辨率渲染出来的形状。同样这些数字，如果是在图片编辑器里放大着视图打上去、再整体缩小，那么压缩还没开始，它到手时就已经是软的。有些工具能把测量吸附到产品的真实边缘上，并按各平台规格图的尺寸把带标注的图导出来，等于把环节 2 和 3 直接跳过——而且因为几何是量出来的、不是生成出来的，箭头上的数字就是卷尺上的数字，而不是某个图像模型编出来的一个看着挺像那么回事的值。如果你正在对比不同做法，给产品图加尺寸标注的工具清单 是个正常的起点。

60 秒定位法

重拍之前先跑这一遍。它能在一分钟左右，把商品图上传后变模糊的三种成因分开——像素不够、编码次数太多、屏幕太密：

• 用手机打开线上详情页，两指放大。缩放能不能触发？如果压根不触发，说明你在平台的缩放门槛之下——这是像素数量问题，不是清晰度问题。
• 右键线上那张图，在新标签页里打开。把它的像素尺寸和你上传的那份对比。数字变小，说明平台做了截顶或者重新派生。
• 把白底黑字的硬边缘放到 200% 看。两侧有淡淡的浅色光晕，说明是二次编码，不是没对上焦。
• 把彩色标注线放到 200% 看。如果线向两侧洇开了，而旁边的黑字很干净，那就是色度抽样。
• 检查你上传的那个文件。只要它曾经被打开、又以 JPEG 存过一次，就回母版重导一遍。
• 把母版的最长边和平台上限比一比。明显偏小就重新导大一点。

如果这六条都过了，图还是发虚，那才轮到拍摄的问题——到那一步该修的是拍摄，不是导出。怎么把一张图拍得"可测量"本身就是一门功课，写在 如何为测量而拍摄产品 这篇里。

常见问题

为什么我的商品图上传到 Shopify 后变模糊，在自己电脑上却很清晰？

因为你电脑上看的是母版，店铺前台给买家的是派生版。Shopify 会自动把图缩小以适配小屏，所以买家拿到的通常是一份缩放过的副本，而不是你那个文件。Shopify 接受最大 5,000 × 5,000 px、20 MB 的图，方形商品图建议 2,048 × 2,048 px，并且图必须大于 800 × 800 px 缩放才会生效；如果你上传的远低于这个数，那么每一份派生版都是从"细节本来就不够"开始的。

上传更大的文件会让图更清晰吗？

只在你真实拍到的分辨率范围内有效。当平台的缩放门槛或者派生尺寸把显示饿着了，加像素才有用——比如在 Amazon 或 eBay 上从 800 px 提到 1,600 px，缩放就打开了。把一张 900 px 的照片放大到 3,000 px，只会增加体积、补不出细节，而且往往还会在上面额外叠一层看得见的插值发虚。

为什么尺寸文字在主图上看着还行，到画廊缩略图里就糊成一团？

缩略图是另一份派生版，由缩放生成。在 1,600 px 母版里 14 px 高的字，到 450 px 缩略图里只剩大约 4 px 高，已经低于字形能扛住任何重采样的尺寸。标注文字的字号，要按它将会出现的最小那个展示位来定，不是按母版来定。

规格图应该传 PNG 而不是 JPEG 吗？

在平台允许的地方，对于以大面积纯色、硬线条和文字为主的图，应该——PNG 是无损的，也不受色度抽样影响。麻烦在于大多数平台入库时反正都会转成 JPEG，所以 PNG 保住的是环节 2 和 3，保不住环节 4。但仍然值得做：一份干净的输入扛过一次二次编码的表现，远好过一份本来就已经受损的。

为什么用移动数据看比连 Wi-Fi 看更差？

有些浏览器和网络会在弱连接下替换成低画质版本，很多店铺前台还会在真图加载完之前先显示一张很小的模糊占位图。如果图过一秒就变清晰了，那是占位图，没什么可修的。如果它一直是软的，那就回到环节 5 到 7 逐个排查。

来源与参考

• Shopify —— 网站图片尺寸规范（最大尺寸、文件体积与缩放门槛）
• Amazon Seller Central —— 商品图片要求
• eBay 帮助中心 —— 为你的商品刊登添加图片
• MDN Web Docs —— Window.devicePixelRatio
• MDN Web Docs —— 响应式图片（srcset 与 sizes）
• MDN Web Docs —— 图片文件类型与格式指南
• web.dev —— 选择正确的图片格式