外贸独立站产品页图片怎么配置：响应式 srcset 与人工检查
产品页图片往往在工厂拍摄、销售收集和站点编辑之间流转，最后只剩一个文件名。结果不是移动端下载三千像素原图，就是买家放大后看不清接口、材质和包装。它不是单纯的 SEO 问题，而是产品资料、页面模板和人工验收没有接起来。本文只处理已有外贸独立站的产品详情页图片交付，不讨论投放，也不承诺图片一定带来排名或询盘。
适用阶段和交付物
适合已经有产品详情页、能维护静态文件或对象存储的小团队。先选一个真实 SKU 做样板，例如 products/stainless-ball-valve-2pc，不要一次改完整个目录。一次合格交付应包括：
- 原始资料登记：型号、拍摄角度、来源、授权范围、确认人和日期。
- 同一构图的 640、960、1440 像素候选文件，以及可回退的 src 文件。
- 产品模板中的 img、srcset、sizes、宽高和替代文本。
- 上线后的浏览器网络日志、Search Console 状态和人工抽样表。
主图用于识别产品，放在型号和标题附近；说明图才用于展示螺纹、阀体标记、尺寸或包装。不要把含报价、交期或认证暗示的销售海报当成主图。参数以已确认的页面表格和受控 PDF 为准，图片不能代替规格确认。
先登记资料并制定尺寸预算
目录应和产品 slug 对应。内部可保留 source/valve-front-master.jpg，公开目录再放 valve-front-640.webp、valve-front-960.webp、valve-front-1440.webp 和一个 valve-front-1440.jpg 回退文件。source 目录只留内部原件，不被页面引用。登记表至少包含 sku、view、source_file、permission、alt_zh、alt_en、checked_by、checked_at。供应商没有确认使用范围时先不上架；IMG_1048.jpg 一类文件也不要直接进入公开目录。文件名不是排名开关，但描述性命名能降低运营时把不同角度覆盖错的风险。
尺寸从页面容器倒推。若桌面主体最多显示 720 CSS 像素、移动端接近视口宽度，可准备 640w、960w 和 1440w。1440w 是高清屏和兜底候选，不表示每位访客都下载它。同组文件必须同构图、同裁切；移动端确实需要另一构图时再用 picture，不要把不同商品放进一个 srcset。透明背景、尺寸线或需要无限放大的技术图，可能更适合 SVG 或独立下载文件，由工程和销售共同确认。
配置产品页模板
模板中保留 src 回退地址；srcset 的宽度描述符必须与文件真实宽度一致；sizes 描述页面里的实际显示空间。主图应具有 src、srcset、sizes、width、height 和与图片相符的 alt。例如主图可使用 640w、960w、1440w 三个候选，sizes 按移动端约 92vw、平板约 58vw、桌面最大 720px 表达。首屏主图可以 eager，正文下方的包装、应用和工厂图改为 lazy，并为每张图设置 width 与 height，避免图片到达时把询盘按钮和参数表推开。不要把所有图都设为高优先级。
Google 的图片文档说明，标准 img 的 src 便于抓取；即使用 srcset 或 picture，也应保留回退 src。模板改动后用页面源代码确认属性实际输出，不能只看 CMS 预览。若 Network 面板显示移动端仍请求 1440w，先检查 sizes 是否和 CSS 容器不一致，再检查 CDN 是否缓存了过期 HTML。不要靠删除小图来掩盖问题。
替代文本和人工审核
alt 应描述图片中可见、并且和当前产品页有关的事实。Two-piece stainless steel ball valve with threaded ends, front view 比一串关键词更有用。不要写 ball valve supplier cheap OEM，也不要加入未经确认的食品级、CE 认证、耐压数值或交期。纯装饰图可以空 alt，但主图、结构细节和尺寸图必须由能看懂资料的人审核。
AI 工具可以根据已批准照片和确认过的产品表草拟文件名或 alt，但输入不能包含猜测资料，输出必须人工审核。它不能补出接口、包装、认证、价格、交期或性能细节。这样使用 AI 只是在整理资料流程中节省重复录入，并不替代销售和工程的事实确认。若多语言页面共用同一图片，审核人员还要确认各语言页的周边文字没有把图解释成不同型号。
上线前后怎么检查
准备十分钟验收表，每次抽样一个新 SKU、一个旧 SKU 和一个多语言产品页：
- 在 Chrome 开发者工具的 Network 面板，以移动和桌面宽度分别刷新，记录实际图片 URL、传输大小和状态码。移动端仍下载 1440w 时，先对照 sizes 与 CSS 容器。
- 在 Elements 检查 img 是否有 src、srcset、宽高和准确 alt；在可控测试环境确认不支持 WebP 时 JPG 回退仍显示。
- 目视核对主图、型号、材质和应用文字是否为同一产品，缩略图不得指向删除文件或公开内部图纸路径。
- 页面公开后用 Search Console URL Inspection 查看抓取和索引状态；它只是排查信号，不是展示承诺。Performance 中记录页面、查询、设备和改版日期，避免把季节波动归因给图片。
- 检查 sitemap 是否包含规范产品 URL。图片若无法从 HTML 发现再评估 image sitemap，不要给每个压缩变体造独立页面。
百度资源平台需要提交时，提交已公开且可访问的产品页 URL，并记录响应和页面版本；不要提交图片 CDN 链接当普通网页。百度和 Search Console 数据都用于状态与趋势复盘，不能替代人工核对销售资料。
风险边界和每月复盘
最大的风险是资料失真和 URL 混乱，不只是文件稍大。不要复用竞品或客户图片；不要用生成工具补认证标识、包装或性能细节；不要把被多页引用的同名文件直接换成另一产品。更稳妥的方法是版本化文件名和可回滚模板引用，旧 URL 在观察期内保留。
每月从产品库抽样十页，记录首屏传输大小、图片 404、缺失或重复 alt、主图是否匹配 SKU、Search Console 页面状态，以及表单区域是否受布局跳动影响。反复出现的问题应回到登记表和模板规则解决，不要逐张图片临时修补。本流程可与产品页资料下载的 PDF 表单与人工审核配套：图片帮助买家识别产品，受控 PDF 交付确认过的规格资料。
发布清单
- 原图、授权范围、SKU 和语言版本均已登记。
- 真实文件宽度与 srcset 一致，src 回退可访问。
- sizes 已和 CSS 容器对照，首屏和非首屏图的加载策略不同。
- alt 是可核实描述，没有关键词堆砌或未确认参数。
- 移动和桌面各有网络日志，抽样页面没有 404 和明显布局跳动。
- sitemap、Search Console 与百度记录仅作为复盘证据。
具体抓取、回退、图片 sitemap 与 alt 边界可对照 Google Search Central 图片 SEO 文档；实现 sizes 时参考 web.dev 响应式图片说明。
常见异常的定位顺序
如果产品页图片显示正常但数据异常，不要先把所有资源重新压缩。先从一条页面日志开始：浏览器请求的是哪一个候选文件、服务器是否返回 200、响应头是否被 CDN 长时间缓存、页面的规范 URL 是否与 sitemap 一致。再对照登记表确认图片属于当前 SKU。一个文件小于预期不等于交付正确；它可能是错误型号的缩略图，也可能是浏览器根据错误 sizes 选择的候选。
当销售更新外观、包装或铭牌时，先在登记表建立新版本，说明替换原因和审核人，再生成候选文件并在预发布环境抽样。不要把旧主图直接覆盖成同名新图，因为引用它的分类页、博客页和缓存缩略图可能尚未同步。若发现 404，先恢复最后可用的公开 URL，再追查模板、上传目录或 CDN 规则；不要用无关通用图临时遮住问题。
多语言页面也要单独检查。中文页与英文页可以共用同一实物图片，但各自的 alt、图注、型号和下载资料必须指向一致事实。产品已经停售或型号变更时，图片维护应和旧产品页的 301、404 和内容下线流程一起审核。人工验收的目标是让买家、爬虫和内部团队看到同一份可核实资料，而不是追求某个单一图片分数。
最后把本次抽样的页面 URL、截图和审核结论存入项目日志，方便下一次改版对照。