Article
商品页写了AVIF和JPEG备用图，为什么AVIF报404仍可能出现破图？
用三个本地浏览器对照分清picture的类型选择与请求失败：不支持AVIF可跳过候选，已选择的AVIF报404却不能据此保证自动改取JPEG。
封面是根据官方文档整理的操作路径示意，非平台界面截图或已完成的验收记录。
不能因为picture里还写了一张JPEG，就保证AVIF地址失效后买家一定能看到备用图。浏览器先按类型、媒体条件等选择候选；“不支持该类型而跳过”和“已选中的文件请求失败”是两种情况。排查时要看实际选中的地址及解码结果，而不只看HTML里有没有备用文件名。
MDN说明，浏览器从source中选择适合的资源，没有匹配项时使用img的src；不支持某个声明类型时可以跳过该候选。picture官方参考 这不是对所有请求失败都自动重试下一个地址的承诺。
三个只改变一个条件的本地对照
2026年10月23日，我们在隔离的Chromium 156.0.8078.4运行三组夹具，每组建立新浏览器上下文，显示同一320×240合成几何图。请求由本地测试路由提供，没有访问真实商店或客户素材；无缓存、Service Worker或应用自定义错误处理。AVIF有效组确实成功解码，才将该浏览器作为支持AVIF的受控条件。
| 实际运行的条件 | 实际请求与显示结果 | 可以得出的结论 |
|---|---|---|
| source声明不支持的测试类型 | 请求fallback.jpg；naturalWidth=320 | 不支持的类型被跳过，JPEG作为匹配回退显示 |
| source声明image/avif且文件有效 | 请求valid.avif；naturalWidth=320；未请求JPEG | 这个测试浏览器能够选择并解码该AVIF |
| 相同AVIF声明，选中地址返回404 | 请求missing.avif；naturalWidth=0；未请求JPEG | 在本次浏览器和条件下，404没有自动触发JPEG接管 |
三组的complete都为true，包括破图组。因此“加载流程结束”也不能单独证明图已正常显示。第三组的currentSrc仍指向missing.avif，需和响应、自然尺寸一起看。本实验只验证一个浏览器版本的受控404，不代表所有浏览器、CDN或故障状态。
给维护者的是实际候选，不是一个源码截图
把发生问题的商品页、具体图片和观察终端交给维护者。由维护者记录当时的currentSrc、请求状态、naturalWidth/naturalHeight，再核对那条资源是否属于批准的商品版本。不需要把买家登录会话或带私人令牌的完整地址贴进公共工单。
一个最小结构可能像这样；它用来说明选择关系，路径只是示例，不能直接复制到生产：
<picture>
<source type="image/avif" srcset="product.avif">
<img src="product.jpg" alt="对应销售版本的商品正面">
</picture>
若product.avif确实存在且支持，JPEG通常不会同时下载；若该候选报错，先修复资源、响应或选源条件。不要把这段结构当成已经实现了错误恢复。需要额外错误处理时，由开发者按具体页面验证，不能只加一个循环重试而掩盖缺失文件。
商家怎样区分重做素材与修复交付
下面是虚构商品页工单，演示如何让问题落到正确负责人；不是我们对任何线上商品页的诊断结果。
| 观察 | 虚构记录 | 决定与完成边界 |
|---|---|---|
| 本地批准图正常、买家页破图 | 杯图v4，当前选择cup-v4.avif，响应404，自然宽度0 | 维护者先检查资源发布和选源，不要求设计师重新生成杯子 |
| 备用JPEG能单独打开 | cup-v4.jpg与同一销售版本对应，但页面没有请求它 | 只能确认该文件可用；不能写页面已经自动回退 |
| 修复后待验 | 维护者计划补齐正确AVIF，尚未复查实际页面 | 保留待办；同一终端重新打开商品页，确认实际候选解码及商品身份后结案 |
若文件能显示但商品型号不对，转入内容批准，而不是继续处理404。若只在特定条件下失败，保留浏览器、视口和观察时间，不用“我电脑能看”覆盖买家的故障证据。
把回退验收纳入发布，而不是只验文件格式
至少在受控预览中检查“候选有效”“声明类型不匹配”“选中资源缺失”三种路径；是否还需更多场景，由实际浏览器范围和发布流程决定。不要在正式商品页故意删图来测试，也不要把预览通过写成生产所有买家通过。
格式本身的选择先读JPEG、PNG与WebP交付判断，它讨论文件能力；本篇补的是页面选源与请求失败的区别。实际页面收到旧版本时，使用发布图片替换与缓存核对。在调整文件之前，仍应按下载文件与批准预览比较确认手里拿到的是同一商品版本。
出现选中地址未知、资源需私人认证、响应仍失败、解码尺寸为0或商品身份不符时，保持未验收。结案记录应指向修复后的实际候选、可见商品及观察条件，不只保留后台“上传成功”的提示。
本文由Itemlume组织编辑，AI辅助起草。上述三组本地浏览器对照实际执行，其余商家工单为虚构练习；未修改真实商店、测试其他浏览器兼容性、测量流量或证明性能提升，也不代表Itemlume提供自动AVIF回退修复。编辑证据政策 · 联系与纠错。MDN资料查阅于2026年10月23日。