WebP 和 AVIF 不能只换后缀：网页图片回退方案怎么设计

WebP 或 AVIF 不能通过改文件名变成 JPEG。网页回退要解决的是“当前浏览器或接收方能否读取这份内容”，因此需要从同一份源图生成不同格式的真实副本，再由页面或交付流程选择合适的一份。

回退设计如果只看文件名，通常会漏掉透明度、动画、颜色、尺寸和压缩质量这些真正影响使用的条件。

先保留一份可追溯的源图

源文件应当与网页派生文件分开保存。每个派生副本至少记录格式、尺寸、质量设置和用途，文件名可以帮助索引，但不能替代版本关系。后续发现某种格式在目标环境中表现不佳时，只重做派生副本，不要反复覆盖母版。

同一张商品图可能同时需要列表尺寸、详情尺寸和移动端候选。格式回退和响应式尺寸是两层关系：先决定画面应有多大，再决定每个尺寸使用哪种编码。

回退不是“都能显示”就算完成

照片、透明图标、带文字的海报和动图对格式的要求不同。照片更关注细节和体积；透明图标要看边缘；文字密集的截图要看小字号；动图还要确认播放能力和帧信息。一个格式能打开，不代表它适合所有内容。

可以先为同一源图准备两到三种候选，在实际页面宽度下检查主体、文字、透明边缘和文件大小。关于格式转换后的检查项目，可以参考图片格式转换质量验收。

页面里要明确选择关系

如果页面使用多种格式，应让选择关系可解释：支持目标格式时优先使用对应候选，不支持时回退到已验证的副本；任何一份副本缺失或尺寸不对，都应在构建或发布前暴露，而不是等用户看到空白区域。

不要把回退链接指向另一份未经检查的原图，也不要用同一个文件名伪装多个格式。页面最终加载哪一份，需要在桌面和移动端各打开一次，确认实际请求和显示结果。

把格式问题和加载问题分开

格式回退解决可读取性，不能替代尺寸规划、缓存和首屏策略。若图片体积过大，换成另一格式也不代表一定适合首屏；若图片在实际宽度下已经足够小，继续压缩可能只会损失细节。

可以参考商品图响应式交付与首屏检查，再通过图叮格式转换工具准备真实候选。工具负责生成副本，页面仍需要自己验证选择逻辑。

稳定的回退方案不是格式越多越好，而是每一份派生文件都有来源、有用途、有验收记录，页面在能力差异下仍能给用户看到正确的图。