网站定制开发，客户拿微信里转存的产品图要当详情大图，说先上线再补原图，要不要拦一下？

官网产品图传上去看着发糊，多数情况不只是后台「压得狠」这一个原因，更常见的是源图尺寸不够、展示位与设备像素密度不匹配、压缩参数叠加三件事同时出问题。按 2026 年常见交付经验，源图短边不小于展示宽度的 2 倍、产品列表图单张约 100–300KB、详情大图约 300–800KB（经验区间），并保留可回滚的原始素材，多数企业官网在常见手机和电脑上肉眼够用；反过来，源图只有几百像素，后台参数怎么调都救不回来，该做的是换素材或改版式。

一、先分清是哪一种「糊」，再决定改哪里

「糊」在交付沟通里是个笼统说法，落到页面上其实分三类，定位方法不同、要改的地方也不同。先分类再动手，能省掉一轮无谓的调参和来回确认。

• 拉伸糊：图片被放大使用，边缘发毛、文字出虚影，常见于通栏横幅用了从公众号推文里另存的小图。
• 压缩糊：主体轮廓还在，渐变区域出现块状色斑或断带，多发生在质量值压得过低、图片被反复另存之后。
• 缩放糊：原图很大，却被塞进小卡片里，体积白花、细节被浏览器重新采样，看上去反而发闷。

判断顺序：把图片在新标签页单独打开、按原尺寸看。文件本身清楚而页面上糊，问题在展示位或缩放；文件本身就糊，就别调参数，先换素材。这一步常被跳过，结果是客户催着改后台，实际要改的是前端容器宽度或素材本身。

二、清晰度由三层决定：源图、展示位、编码

三层要同时对上，缺一层整张图就白做。2026 年常见项目里，返工次数多的往往不在编码层，而在源图层，因为素材由市场或销售提供，来源杂，原始尺寸没人说得清。

• 源图层：短边像素建议不低于展示宽度的 2 倍，通栏位常见需要 2400–3000px 以上的源图（经验区间），2 倍图是为了覆盖高清屏。
• 展示位层：CSS 里写死的容器宽度要与实际渲染宽度一致；产品卡片被弹性布局拉宽后图片二次放大，是交付时较常见的坑。
• 编码层：JPG 适合照片，PNG 适合需要透明的图标，WebP、AVIF 在同体积下画质有优势，但源图不够时换格式一样无效。

换句话说，格式只决定「同样体积下谁更好看」，尺寸决定「有没有细节可看」，两者不能互相替代。把换格式当成治糊手段，是验收沟通里较常见的误判。

三、三种常见做法：成本与周期对照

方案选择取决于图片数量、展示端数量和后续换图频率，而不是取决于后台有没有某个开关。下面三档是按 2026 年项目经验给出的区间，可直接拿去和客户对成本与周期。

• 原图直传：上线快、不用额外配置，但首屏体积常见会到几 MB，弱网首次打开明显变慢；适合内网预览或临时演示，不建议作为正式上线做法。
• 后台上传统一压缩：实现简单，一份图走天下；额外工期通常在半天到 1 天（经验区间），代价是详情大图和列表缩略图共用一档质量，常见结果是列表糊、大图偏大，后期还要人工补。
• 按展示位生成多规格：前期要定图片位清单和规格表，交付周期一般多 1–3 天（经验区间），换图时不用重新调参数，清晰度和体积能兼顾，适合产品图多、多端展示的企业站。

可核对的对比：同一张短边 900px 的源图放进 1600px 宽的详情位，质量值取 80 还是 95、转成 JPG 还是 WebP，放大后都会发虚；反过来，2400px 源图缩到 800px 展示位，质量值取 80 左右在手机上通常已看不出差别。这说明先要改的是尺寸，并非参数。

四、交付现场：详情大图赶上线的一次处理

有一次改版，客户市场部提供的详情主图是从公众号推文里另存的，横向只有 900 多像素，却要求铺满 1600px 宽的详情位，而上线只剩三天。当时的限制是补图需要等客户重拍或找原片，周期不能再拖，做法是先把每个图片位的展示宽度列成清单，按 2 倍反推最小尺寸发给客户，短期补不到的位改成左右图文版式，而不使用通栏大图；上传后抽 5 张在手机上实地看一遍。结果是首屏图片总体积从常见的 3–6MB 降到 1MB 上下（经验区间），代价是详情页版式重排一次、多花约半天沟通，换来的是不必上线后再返工。

五、适用与不适用边界

适合做多规格处理的：产品图数量较多、要同时覆盖桌面与移动端、后续由非技术同事自行换图的企业官网。规格表定好，长期返工最少。

不必上或不该上的：纯文字型官网、整站只有几张团队合影、素材来源本身是网络截图或聊天记录转存的图。这类情况做多套规格收益有限，先把源图换成合格素材更划算；仅供内部后台查看的图片，也不必按前端展示位做多套。

可独立摘录的边界：当源图短边低于展示宽度的 1.5 倍时，调压缩参数无法恢复细节，此时应改版式或重新获取素材，而不是继续在后台试参数。

常见问题

客户说先上线再补原图，能答应吗？

可以答应，但要写清补图时间和责任人，并把首页横幅、详情首图列为优先替换项；长期挂低清图会影响询盘信任。

源图只有手机拍的，能直接放详情页吗？

多数可用，前提是光线足、短边够展示宽度 2 倍左右；噪点明显时先做轻度降噪，若要做通栏大图，建议重拍。

后台质量值调到 90 就够清晰了吗？

不是单一数值能定。列表缩略图和详情大图共用一个值，常见结果是列表糊、大图偏大，按图片位分档设置更稳。

换成 WebP 就会更清晰吗？

不一定。格式主要影响同等体积下的画质与体积，源图尺寸不足时换格式也补不回细节，只能减小文件。

客户说手机上清楚、电脑上糊，是什么原因？

常见是只给了一档小图，桌面容器把它拉宽后二次放大；先核对展示位宽度与源图短边的比例，再决定是否换图。

如果官网正在改版或换图，可以先做两件事：把全站图片位列成清单并标出展示宽度，再按「展示宽度 × 2」核对现有源图。适用于产品图多、多端展示的企业站；不适用于素材本身就不合格，或整站图片只有个位数的情况——那类项目先把源图换掉，比增加处理环节更有效。