图片丢失时,页面不应只留下破图图标,而应让替代文本、图注、结构化数据与页面正文共同承担信息职责:先判断图片是内容主体还是辅助装饰,再决定保留哪些文字、是否降级展示,以及是否需要把图片承载的信息补写进正文。下面用一个假设情境把决策过程串起来。
假设某站有 200 个商品列表页,每页展示 12 张商品缩略图。上线初期抽查 5 个页面,图片都能正常显示;但把同一套模板铺到全部页面后,运维发现部分图片因存储路径调整而返回错误。此时不能只靠“加一个占位图”解决,因为不同图片在页面中的角色并不相同:有的是商品主图,有的是装饰性图标,有的只是重复品牌标识。
如果所有图片都统一替换成同一张灰色占位图,用户会失去判断商品差异的依据;如果把图片直接隐藏,页面可能只剩价格和标题,信息量骤降。更稳妥的做法是先给图片分类,再分别处理。
判断标准不是图片尺寸,而是它是否承载了用户理解页面所必需的信息。
这个分类动作会直接影响下一步:内容主体图需要补信息,辅助说明图需要转写结论,装饰图只需安静降级。若把三类图混在一起处理,页面要么信息过载,要么关键内容缺失。
很多站点给图片写了替代文本,但写的是“商品图片”“banner图”“配图1”。这类文字在图片正常显示时没有存在感,在图片丢失时也无法提供有效信息。替代文本应当描述图片中与页面主题相关的信息,而不是描述图片本身。
假设一个商品列表页的缩略图丢失,替代文本如果写成“红色陶瓷杯 350ml 带盖”,用户至少能知道商品是什么;如果写成“商品缩略图”,用户只能看到一排无意义的文字。前者可以帮助用户继续比较,后者只会让列表变得不可读。
但替代文本也有边界:它适合短描述,不适合承载长段落。如果一张流程图里有五个步骤,替代文本写不下全部内容,此时应把步骤写进图注或正文,并让替代文本指向那段文字所在的位置。
图片丢失时,页面保留必要信息的核心动作是:让不依赖图片的文本也能回答用户的主要问题。具体可以按以下顺序检查。
假设一个教程页面的步骤截图丢失,图注只写“步骤三截图”,正文也只写“如图所示”,那么图片丢失后用户无法继续操作。此时应把步骤三的操作文字补进正文,图注改为“步骤三:在设置页关闭自动同步”,替代文本写“设置页中自动同步开关的位置”。这样即使图片不显示,用户仍能完成操作。
图片丢失还可能影响结构化数据中的图片字段。如果页面标记了图片地址,而该地址返回错误,不要为了通过校验而填一个无关图片地址。更合理的做法是确认该字段是否仍能代表页面主体;如果不能,应调整标记内容或暂时移除该字段,而不是用假地址掩盖问题。
同时,页面状态码和错误处理要一致。假设图片请求返回 404,但页面本身仍返回 200,这是正常的:页面内容还在,只是图片资源缺失。此时不应把整个页面重定向到首页或错误页,否则用户和抓取程序都会失去原有内容。需要区分“页面不可用”和“页面中的某个资源不可用”,前者才需要错误页,后者应在页面内降级处理。
一个可执行的动作是:在图片位置使用 <img> 的替代文本,并在图片下方保留图注;如果图片是内容主体,再补一段文字说明。完成后检查页面在图片不显示时是否仍能回答用户的主要问题。如果能,下一步只需监控图片恢复情况;如果不能,就要回到正文补信息,而不是继续调整占位图样式。
个别页面图片丢失时,手工补一段文字往往可行;但 200 个列表页同时出现例外时,手工补写会迅速失控。此时应把“图片角色分类”和“缺失后保留什么”写成模板规则:内容主体图必须带有效替代文本和图注,辅助说明图必须把结论写进正文,装饰图允许隐藏。规则落地后,再抽查不同模板的页面,确认图片丢失时不会只剩破图图标。
需要强调的是,替代文本、图注和正文补写是为了让页面在图片缺失时仍可理解,而不是为了掩盖资源错误。图片恢复后,这些文字仍应成立,否则就说明它们原本只是为了应付检查。把信息保留做在内容层,而不是只做在占位图上,才是图片丢失时更稳妥的处理方式。