商品图首次打开清楚，切换颜色后为什么变模糊？

先检查切换后实际显示的是哪张图片、哪一种尺寸。 如果首次进入商品页很清楚，只有选中某个颜色才变糊，原因可能在变体图片绑定、网页请求的图片版本或显示方式。重新生成一张更大的 AI 图片，不能修复店铺仍然请求错误资源的问题。

本文由 Itemlume 负责编辑，AI 辅助研究与写作，是既有英文指南的中文深度适配。下文切换记录是虚构教学例子，没有检查某个实际店铺。编辑与证据范围见关于我们，问题可通过联系页面反馈。

先做这三件事

• 保留“默认颜色 → 问题颜色 → 默认颜色”的复现路径。
• 分开检查上传原图、变体与图片的对应、网页实际加载版本。
• 用同一设备和缩放比例复测；不要只验证默认图片就结束。

在出现问题的位置复现一次

先确认问题发生在商品列表卡片，还是详情页的图片画廊。这两个位置可能使用不同的图片组件；修复详情页不代表列表页也已修好。

在同一设备、同一浏览器缩放比例下打开公开页面。记下默认颜色，选择一个有问题的颜色，再切回默认颜色。记录每次选中的名称、实际显示的商品以及开始变糊的时点。页面仍在加载时，不要把暂时的低清预览直接当作最终结果；等加载结束后再记录状态。

接着在手机上重复同一条路径，另起一行保存结果。不要把手机与电脑截图直接相减后宣布原因，因为屏幕密度、显示宽度和页面选源都可能不同。

先把原图问题与网页问题分开

从你有权管理的媒体库中找到问题颜色的原始上传文件，直接查看其商品细节。比较时看标签、接缝或纹理等真实细节，不只看文件标称尺寸。

Shopify 官方商品媒体说明可用于核对后台媒体管理步骤，但不能代替对当前主题的检查。如果原图本身缺少细节，先回到商品参考图准备；如果是颜色对应错了，就先修绑定，不要先锐化。

请维护者记录真正加载的资源

把公开网址、问题颜色、预期图片和裁剪后的问题截图交给主题或前端维护者。不要在公开论坛发送后台密码、客户资料或带登录凭据的链接。

维护者需要记录受影响组件、所选变体标识、预期媒体、图片元素的 currentSrc、实际响应的图片尺寸、页面显示尺寸与设备像素比。MDN 对 currentSrc 的说明指出，它表示浏览器选中的图片 URL，即使图片尚未成功加载也可能有值。因此还要核对加载是否成功以及收到的内容，不能只截一个 URL 就判定通过。

不同 URL 可能是正常的响应式图片版本；相同 URL 也不能单独证明颜色绑定正确、响应内容相同或细节足够。不要把其他主题的代码片段直接粘到生产店铺，先在草稿主题或测试环境验证。

用一张小表避免反复猜测

下面是虚构、尚未解决的交接记录。300 CSS 像素与 2 倍屏幕仅用于说明放大线索，不是平台要求或通用上传尺寸。

300 CSS 像素在 2 倍屏幕上对应 600 个设备像素；150 像素资源被放大值得调查，但不能据此要求所有商品统一上传某个尺寸。原图若已失焦，即使提供更大的文件也不会恢复真实纹理。

修复后，验收整条切换路径

逐个检查受影响颜色、切回默认颜色，再回到问题颜色。确认图片清楚的同时，商品颜色、裁切和变体对应仍正确。列表卡片和详情页分别验收，手机与电脑分别记录，不把未测试的状态写成“全部正常”。

保留修复前后截图、主题版本、实际响应尺寸和批准人。若现在图片清楚但标签或配件不对，继续按AI 商品图片审核检查商品事实。Itemlume 可以帮助制作商品素材；店铺主题检查、代码修复与发布由相应店铺工作流完成，生成图片不会自动修改你的店铺。

常见问题

要不要把所有颜色重新生成成更高分辨率？

先判断原图是否清楚、网页是否加载了正确版本。没有定位到原图问题前，批量重生成可能增加成本却不解决选源错误。

论坛里有人说是主题问题，可以直接照抄修复吗？

相同症状不等于相同原因。先记录实际组件、资源和切换过程，再由维护者在草稿环境测试。

默认颜色清楚，是否就能关闭问题？

不能。验收范围必须覆盖原先出问题的颜色和切换顺序；没有测到的设备与组件应明确列为未核验。