个人博客建站步骤，图片丢失时页面应怎样保留必要信息
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /9ed0cc6bb787.html
📄
个人博客建站步骤，图片丢失时页面应怎样保留必要信息
图片丢失时，页面不必强留原图位置，但必须保留“这张图原本承担什么信息”。如果图片只是装饰，删掉占位并收紧排版即可；如果图片承载步骤、数据、界面状态或人物身份，就应该用替代文本、图注或相邻说明把信息补回来。判断标准只有一条：读者不看图，是否还能完成这篇博客要传达的动作或理解。
先分清三种图片，再决定保留什么
旧博客迁移、图床停用或外链失效时，最容易犯的错是统一插入一张“图片加载失败”占位图。占位图只告诉读者出了问题，没有告诉读者原来是什么。更稳妥的做法是按图片功能分类处理。
- 装饰图：分隔线、背景纹理、纯氛围配图。丢失后直接移除，保留原有段落间距即可，不必补文字。
- 说明图：流程图、界面截图、步骤示意、表格图片。需要在原位置补一句可独立阅读的说明，或把图中关键步骤改写成文字列表。
- 证据图：照片、票据、运行结果、对比截图。若无法恢复原图，应保留图注说明其内容、时间和来源，并明确标注图片已不可用，避免读者误以为被删除是在掩盖信息。
这个分类决定了下一步动作：装饰图直接清理；说明图优先重画或改写；证据图优先找回原件，找不回才降级为文字记录。
替代文本不是万能补丁，适用条件要看清
很多人第一反应是给<img>补一段alt。这只能解决“图片无法显示时读者看到一句简短描述”的问题，不能承载复杂信息。替代文本适合一句话能说清的内容，例如“博客后台文章列表页”。如果原图是一张包含五步操作的流程图，把五步全塞进alt，读屏用户和普通读者都难以消化。
此时更合适的是把信息移到正文：用<ol>列出步骤，在原图位置保留一句图注，说明“原流程图已失效，以下为文字还原”。这样做的结果是，页面不再依赖单一图片资源，后续即使更换图床，信息层也不会再次丢失。反过来说，如果图片涉及精确像素、颜色值或无法用文字复现的视觉细节，文字还原就会失真，这时应优先找回原图，而不是硬写一段模糊描述。
一个会让上述结论失效的反例
假设一篇旧教程的截图里包含软件界面上的具体按钮位置，而该软件版本已经更新，界面完全改版。此时无论补替代文本还是写文字说明，都可能误导读者按旧界面寻找按钮。这种情况下，保留必要信息的正确做法不是复原截图，而是在页面顶部加一条醒目说明：本文对应旧版本，界面已变化，操作思路仍可参考，并给出当前版本的通用操作方向。若无法确认当前版本行为，就只标注“该截图对应旧版本，请以你所用版本为准”，不编造新界面细节。
这说明“保留信息”不等于“保留原图描述”。当图片所记录的事实本身已经过期，保留它的信息价值反而低于明确标注过期。判断依据是：图片描述的对象是否仍然存在且行为一致。
可执行的替换顺序与结果
面对一批图片丢失的旧文章，可以按下面的顺序处理，每一步的结果都会影响下一步是否继续。
- 先扫描全站，列出返回错误的图片地址及其所在文章。若错误集中在同一域名，说明可能是图床或外链策略变化，优先整体修复，而不是逐篇改文字。
- 对能找回原图的文章，恢复图片并补上宽度、高度属性，减少布局跳动。此时不需要改写正文。
- 对找不回原图但信息仍有效的文章，按装饰、说明、证据三类分别处理，补图注或改写为文字。
- 对信息已过期的文章，加版本说明，并把过时截图从正文中移除或折叠说明。
- 处理完后抽查几篇，用纯文本阅读的方式判断：不看任何图片，是否还能理解文章主旨。若不能，说明信息层仍有缺口，需要回到第二步补充。
这套顺序的关键在于先判断图片是否可恢复，再判断信息是否仍有效，最后才决定文字怎么写。跳过前两步直接写替代文本，往往会把过期信息固化下来。
给旧内容留一条体面的退出路径
个人博客的旧文章不可能永远维护。对确定不再更新的内容，可以在文末保留一段简短的状态说明，写清哪些图片已不可用、哪些信息仍可参考。这样既保留了页面作为记录的价值，也不会让读者把失效图片误当成当前状态。真正需要避免的，是让一张破图孤零零挂在正文里，既没有说明，也没有下一步可读的内容。
