HTML链接用法：图片丢失时页面应怎样保留必要信息

📍 WDQWDWQD987AAAAA:216.73.216.251
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /2dfd3c244930.html
📄

HTML链接用法：图片丢失时页面应怎样保留必要信息

图片丢失时，页面是否还能保留必要信息，取决于这张图承担的是“内容”还是“装饰”。如果图片是商品图、证件图、图表或操作示意，缺失后必须让用户仍能知道这里原本有什么、下一步该做什么；如果只是背景纹理或分隔装饰，缺失后应尽量不干扰阅读。<img> 的 alt 是核心手段，但它不是万能补丁，链接与周边文字也要配合调整。

先判断图片属于内容还是装饰

内容图片指用户不看图就无法完成理解或任务，例如商品主图、二维码、流程图、示例截图、头像。装饰图片指删掉后不影响信息完整性的视觉元素，例如背景纹理、分隔线、纯氛围图。两类图片丢失后的处理方向不同。

判断依据可以很直接：把图片遮住，问自己“用户还能不能完成这一步”。不能，就是内容图；能，且不影响任务，就是装饰图。

内容图片丢失：用替代文字和链接补回信息

当图片是内容图，alt 要写“这张图提供了什么信息”，而不是“这是一张图片”。假设一个商品详情页的主图加载失败，下面这样写只能告诉用户有图，不能告诉用户图里是什么：

<img src="product.jpg" alt="商品图片">

更有效的写法是把关键信息放进替代文字，并在图片附近保留可点击的文字入口：

<img src="product.jpg" alt="红色折叠椅，展开后高约七十厘米">

<a href="/product/chair">查看折叠椅详情与规格</a>

这样做的实际结果是：图片加载失败时，用户仍能知道商品是什么、还能点进详情页。下一步就可以检查这个文字链接是否指向正确页面，而不是只盯着图片文件是否恢复。

如果图片承担的是操作示意，例如“点击右上角按钮完成设置”，替代文字应写成操作说明，并在正文里重复关键步骤。图片恢复后，这段文字仍然对看不清图或使用读屏的用户有价值，不需要删掉。

可点击图片：链接文字不能只靠图片表达

图片链接是图片丢失后最容易丢信息的位置。因为用户既看不到图，也可能不知道这里可以点。常见错误是把导航图标写成：

<a href="/cart"><img src="cart.png" alt="购物车图标"></a>

图片丢失后，用户看到的是“购物车图标”几个字，勉强能猜，但不如直接说明去向：

<a href="/cart"><img src="cart.png" alt="前往购物车"></a>

更稳妥的做法是让链接文字独立存在，图片作为增强：

<a href="/cart">前往购物车<img src="cart.png" alt=""></a>

这里图片的 alt 为空，是因为链接文字已经说明去向，读屏不会重复。这个动作的结果是：无论图片是否加载，链接都保留完整语义。下一步应检查同一页面里所有图标链接，是否都有可读文字，而不是只修一个购物车图标。

例外：图片本身就是唯一信息载体

有些图片无法用一句替代文字完整表达，例如复杂图表、长截图、设计稿对比。这时不能只靠 alt，而要在图片附近提供文字摘要或数据表。适用条件是：图片信息量明显超过一句描述，且用户需要据此做判断。

实施动作可以分三步：第一，用简短 alt 说明图表主题；第二，在图片下方给出关键结论；第三，如果数据重要，提供可读的文字列表或表格。这样图片丢失时，用户仍能获得结论，而不是只看到“图表加载失败”。

例外情况是：如果图片只是重复正文已经写清楚的内容，就不必再补一份长描述，否则会增加阅读负担。判断标准是图片是否提供了正文没有的信息。

图片丢失后的检查顺序

  1. 先看图片是否可点击。可点击的，检查链接文字是否独立可读。
  2. 再看图片是否承载关键信息。承载的，检查 alt 是否说明了信息，而不是只描述图片存在。
  3. 最后看装饰图片。装饰图片应使用空 alt，避免图片丢失后出现无意义文字。

图片丢失本身不能证明替代文字写对了，也不能单独说明页面结构有问题；它只是暴露出图片与文字的分工是否合理。真正要决定的是：这张图承担信息，还是只做视觉增强。前者必须留下文字路径，后者应安静退场。把这个判断落实到每一张关键图片上，页面在图片缺失时才能继续把必要信息交给用户。

图1 图2
nginx