自助建站系统：图片丢失时页面应怎样保留必要信息
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /0616b62958ce.html
📄
自助建站系统：图片丢失时页面应怎样保留必要信息
先给结论：图片丢失时不要只补一张图，而要把该图承担的信息拆成“替代文本、可见文字说明、结构化数据”三层。常规做法通常只改了 alt，遗漏的条件是替代文本只服务于读屏和搜索，不服务于普通访客。访客看到破图时，页面仍需要靠可见文字告诉他这里原本是什么、下一步能做什么。
先判断这张图是内容还是装饰
处理前先给页面上的图片分两类，因为两类图的处理方式不同。
- 内容图：产品实拍、步骤截图、价格表、证书、地图、二维码。这类图本身承载信息，丢失后必须补可见文字。
- 装饰图：背景纹理、分隔线、纯氛围图。这类图丢失不影响理解，只需保证不出现破图图标和布局塌陷。
判断依据很简单：把图遮住，读者是否还能完成页面上的动作。如果不能，它就是内容图。以你手中的产品详情页为例，先列出所有内容图，再决定每张图补什么文字，而不是统一写一句“产品图片”。
把替代文本和可见说明分开写
alt 属性的作用是：图片无法显示时，浏览器可能把它作为占位文字显示；读屏软件会朗读它；搜索引擎用它理解图片内容。但它不会稳定地出现在所有访客眼前，也不适合承载长句和操作指引。
因此每张内容图需要两份文字：
- alt：一句话说清图是什么，控制在能读完的长度，例如“黑色折叠椅侧面，座高 45 厘米”。
- 可见说明：放在图下方或图位置的段落里，说明关键参数、价格条件或操作步骤。这段文字即使图片正常显示也有价值。
假设一个页面有六张产品图，其中三张是不同角度的同一款椅子，两张是尺寸标注图，一张是包装清单。合理的做法是：三张角度图共用一句描述性 alt，尺寸图把关键尺寸写进可见说明，包装清单图用列表把清单文字直接写在页面上。这样图片全部丢失时，页面仍能回答“这是什么、多大、包含什么”。
用结构化数据补上机器可读的信息
如果页面本身是产品、文章、活动或本地商家页面，可以在 HTML 中加入对应的结构化数据，把名称、描述、价格区间、日期等字段写成文本。这样即使图片资源失效，页面主题信息仍以文本形式存在。
需要注意适用条件：结构化数据必须与页面可见内容一致，不能只写在代码里而页面上看不到。以活动页为例，活动名称、开始时间、地点应同时出现在可见文字和结构化数据中；只改代码不改页面，属于不一致，可能带来反效果。
一个可执行动作是：打开页面源码，找到图片附近的容器，先补一段 <p> 可见说明，再在页面头部补对应的结构化数据字段。做完后把图片地址临时改成一个不存在的路径，刷新页面，检查三件事：破图图标是否被隐藏或替换、可见说明是否出现、布局是否错位。这个检查结果决定下一步是继续补文字，还是先修容器尺寸。
给破图本身一个可控的显示状态
很多自助建站系统允许在图片加载失败时显示占位图或隐藏图片。这里有一个取舍：
- 显示占位图：适合内容图，能让访客知道这里本来有图，但占位图本身不传递信息，仍需配合文字。
- 隐藏图片：适合装饰图，避免破图图标破坏观感，但要确认隐藏后容器高度不会塌陷，导致文字重叠。
实际操作中，给图片容器设定固定宽高比或最小高度，比单纯隐藏图片更稳。假设图片区域高 300 像素，隐藏图片后容器变成 0 高，下方按钮会上移，读者可能误点。先给容器设最小高度，再决定是否隐藏图片，页面结构才不会被图片状态牵着走。
把处理结果写成可复查的清单
集中处理一个页面时，按下面顺序执行，每一步的结果决定下一步：
- 列出所有图片，标记内容图或装饰图。
- 为内容图写 alt 和可见说明，为装饰图确认可隐藏。
- 给图片容器设最小高度或宽高比。
- 补与可见内容一致的结构化数据。
- 临时替换图片地址，检查破图状态下的文字、布局和操作入口。
- 恢复图片地址，再检查正常状态下文字是否重复或冗余。
第 5 步是分界线：如果破图状态下读者仍能知道页面主题并完成主要动作，说明信息保留到位；如果只能看到空白或一句“图片加载失败”，说明遗漏的仍是可见文字，而不是图片本身。把这个检查方法固定下来，之后新增页面时按同样顺序处理，就不必每次从零判断。
