很多站点把图片、视频、图表当作版式里的装饰，上线时只关心能不能显示，很少回头检查它们在抓取和搜索层面是什么状态。实际上，一张配图能不能被识别、有没有文字说明、加载方式是否合理，都会影响页面被理解的程度。这篇从日常维护的角度，把图片和媒体资源该看的地方捋一遍。
一、先确认图片是内容而不是背景
用 CSS 的 background-image 铺出来的大图，在页面代码里只是样式声明，没有独立的资源地址，也没有说明文字。对用户来说它看得见，对抓取工具来说它基本不存在。如果头图、产品图、流程图承担着传达信息的任务，最好用 img 标签放进正文，而不是当背景贴上去。
图标、分隔线这类纯装饰元素可以继续用背景或字体图标，但要在代码上明确标注为装饰，避免和正文图片混在一起判断。
二、说明文字要写，而且要写得有用
alt 属性的作用是在图片无法显示时提供替代信息，同时也是图片语义的主要来源。常见的两个极端：要么整站图片的 alt 都空着，要么把关键词硬塞进去凑长度。
- 正文配图：用一句短语说清图里是什么，比如“后台栏目管理界面截图”。
- 功能按钮图片：写清点击后的动作，比如“提交表单”。
- 纯装饰图：留空或标记为装饰，不要写无意义的词。
- 图片旁边的图注文字同样会被读到，值得认真写一句。
如果一篇文章的图片很多，可以在图片上下方各补一句文字说明，让图文之间有衔接，而不是一串图片连着出现。
三、文件名和路径也顺手改一改
相机导出的 IMG_2043.jpg、屏幕截图 2024-05-11.png 这类名字，对谁都没有帮助。上传前改成简短、能看懂的英文或拼音，多个词之间用连字符连接，例如 site-navigation-structure.png。路径上按业务或栏目归档，别把上千张图全堆在一个目录里。
图片文件名不需要堆关键词，清楚、能对应内容就够了。同一张图反复用在多个页面时，注意不要在不同目录里出现多个版本，避免后续替换时改漏。
四、加载方式：懒加载和首屏要分开对待
懒加载可以减轻首屏压力，但用过头会带来两个问题：首屏可见的图如果也被推迟加载，用户会看到一片空白；滚动才触发的图片如果实现方式依赖脚本且没有兜底，抓取时可能只拿到占位符。
- 首屏范围内的图片直接加载，不要挂懒加载。
- 正文中后段的图片可以懒加载，但要在代码里保留真实地址。
- 图片设置明确的宽高，避免加载完成后页面跳动。
- 上传前压缩体积，格式上优先考虑 WebP 等现代格式，同时保留兼容回退。
五、托管与引用：外链图片要能长期稳定
有些站点把图片放在第三方图床，早期方便，后来图床限流或停止服务，页面上就出现一排红叉。重要的图片尽量放在自己可控的域名下，或者至少确认对方的稳定性与访问策略。如果图片走 CDN，注意缓存策略是否过久，替换图片后要能及时刷新。
另外，图片域名和主站域名不一致时，确认该域名的访问没有被规则挡住，也确认没有被设置成不允许索引。
六、图片站点地图与定期巡检
如果站点的图片量较大、又希望它们被收录，可以单独维护一份图片站点地图，把重要页面的主要图片列进去。维护成本不低，所以优先覆盖产品图、教程配图这类有实际价值的图片，不要把装饰图全塞进去。
图片相关的检查不需要一次做完，跟着内容更新节奏走更容易坚持：每发一篇带图文章，顺手确认文件名、alt、尺寸和加载方式是否合理。
最后，定期做一次抽查：随机挑几个页面，关掉图片加载看文字是否还能读懂，用开发者工具看图片请求有没有大量 404，检查有没有引用早已失效的外链图片。把这些问题记下来，分配到一个固定的维护时段里处理，比临时补救要从容得多。