优化建站：图片丢失时页面应怎样保留必要信息
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /1f02f0fee820.html
📄
优化建站：图片丢失时页面应怎样保留必要信息
结论先说：单张图片加载失败时，只要图片容器预留了尺寸、替代文本写清了图片承担的信息、且关键信息没有只存在于图里，页面就仍可读可用。但这个做法在一种情况下会失效——当图片本身就是用户要获取的主要内容，比如商品细节图、证件照、图纸或数据截图，此时替代文本无法等价承载信息，正确动作是让图片可被重新获取，而不是继续用文字兜底。
先判断图片在页面里扮演什么角色
同样一张图，在不同位置承担的任务不同，处理方式也不同。可以先按下面三类区分：
- 装饰性图片：分隔线、背景纹理、纯氛围图。丢失后不影响理解，容器保持占位即可，替代文本留空。
- 信息性图片：流程图、对比图、带数据的截图。文字信息需要能被独立读出，替代文本或旁边的文字说明要覆盖图里的结论。
- 主体性图片：商品主图、作品原图、扫描件。这类图就是内容本身，文字只能提示“图未加载”，不能替代它。
判断标准很简单：把图遮住，读者还能不能完成这一页要做的事。能，就属于前两类，可以走文字兜底；不能，就属于第三类，兜底只是过渡状态。
让容器先占住位置，避免整页错位
图片丢失最常见的连锁反应不是“少了一张图”，而是布局塌陷：文字挤上来、按钮移位、相邻卡片高度不一致。给图片容器设定宽高比或固定高度，可以让它在图片未加载时仍占据原本的空间。
一个可用的做法是：在 CSS 里给图片外层容器写 aspect-ratio，或按设计稿给 width 与 height 属性。这样即使图片请求失败，页面结构也不会跳动，用户仍能正常读到周围的文字和操作入口。
需要留意的是，这个动作只解决“位置”，不解决“内容”。容器占住了，但里面是空白还是有一句说明，取决于下一步。
替代文本要写“图在说什么”，不是“这里有一张图”
替代文本的作用是在图片不可见时接替它传递信息。写“产品图片”“示意图”“banner”这类词，等于什么都没说。有效的写法是直接写出图片承载的信息，例如“接口接线顺序：电源接左侧第一针，信号接第二针”。
如果图片旁边已经有完整文字说明，替代文本可以简短，避免重复朗读。如果图片是唯一的说明来源，替代文本就要承担全部信息量。
还要注意：替代文本只在图片加载失败或被辅助技术读取时起作用，它不会让主体性图片变得可用。对商品主图、证件扫描件这类内容，替代文本只能提示状态，不能完成交易或核验。
什么时候这个结论不成立
反例出现在图片即内容的场景。假设一个二手交易页面，用户上传了物品实拍图，买家需要看图判断成色。此时图片丢失，替代文本写“物品实拍图”没有意义，买家无法据此决策。正确做法不是优化文字兜底，而是：
- 在图片位置显示明确的失败提示，而不是空白或破图图标；
- 提供重新加载该图的入口；
- 如果图片来自用户上传，提示上传者重新上传，并在服务端保留原图与缩略图的对应关系。
另一个边界是：当页面依赖图片传递价格、库存、资质等关键信息时，把信息只放在图里本身就是风险。更稳的做法是把关键字段用文字同步输出一份，图片作为补充而非唯一来源。
下一步：先抽样，再决定兜底力度
不要一上来就给全站图片加同一套兜底逻辑。先做一次小范围抽样：从不同栏目各取若干页面，手动屏蔽图片请求，观察哪些页面仍可读、哪些页面功能中断。
根据结果分两档处理：可读的页面，保留容器占位与信息性替代文本；功能中断的页面，补上失败提示与重新获取路径。做完这一步再决定是否推广到全站，比直接套用统一规则更不容易返工。
