图片往往占了頁面的大部分体积，却常被当成设計的事而不是运营的事。图片過大、占位图不替換、外鏈图片失效，既影响用戶看到内容的速度，也會影响蜘蛛對一個頁面的判断。下面给出一套可落地的图片资源自查方法，從体积、加载方式到抓取路径逐項過一遍。
一、先列出頁面上的图片清單
不必一上来就全套重构，先把主要栏目模板里的图片按位置分類，找出最值得處理的那几張。
- 首屏主图與轮播图：体积最大，最影响渲染。
- 列表頁缩略图：數量多，單個文件多出 100KB 就會被整体放大。
- 正文配图：數量不定，常见問题是原图直接上传。
- 图标、背景图、装饰图：單個很小，但請求數多。
- 图标字体或内嵌 base64 的图片：不易被單獨缓存，改動时要整頁重新下载。
二、体积與格式：先處理重复出現的那几張
- 優先輸出 WebP 或 AVIF，保留原格式作為回退。
- 按實际顯示尺寸導出，不要用一張 2000 像素的图靠 CSS 缩小。
- 压缩时保留可接受的画质，用工具批量處理，避免逐張手動調。
- 如果用了图片 CDN，確認裁剪、压缩參數确實生效，而不是只改地址没改輸出。
- 不要把大图以 base64 形式寫進 HTML 或 CSS，它無法被單獨缓存。
三、懒加载要分清主次
懒加载能降低首屏压力，但用法不当會让重要图片迟迟不出現。首屏范围内的图片不要做懒加载，或者用占位色块加提前加载；靠後的正文配图可以使用原生的 lazy 加载属性。
用脚本實現懒加载时，要確認占位图能被正常替換。脚本一旦报错，頁面可能長期停在灰块上。建议在不同網絡环境下各打開一次頁面，確認图片都能出来。
四、图片信息要與頁面内容對得上
- 文件名尽量可讀，用语义化的英文或拼音，避免 IMG_3821 這類命名。
- alt 描述图片的實际内容，不堆關鍵詞，也不要整站共用一句话。
- 關键信息不要只放在图片里，图上的文字蜘蛛讀不到。
- 图片與所在栏目主题一致，避免同一張通用配图出現在所有文章里。
五、图片的抓取與收錄细节
- 確認图片目錄没有被 robots.txt 誤屏蔽，否則图片無法被抓取。
- 外鏈图片要评估對方是否長期可用，重要图片建议轉存到自有域名或 CDN。
- 图片地址返回 404，或被重定向到 HTML 頁面，都會让抓取和展示出問题。
- 有的 CDN 在回源失敗时會返回 200 的空图，容易被忽略，需要加错誤监控。
- 重要图片可以寫進站点地图的图片扩展，但不必把所有装饰图都塞進去。
六、上线前的图片自查清單
- 挑三個主要模板，用浏览器開發者工具的 Network 面板按大小排序，看前十個文件。
- 確認首屏图片没有被懒加载脚本拦住。
- 检查列表頁缩略图是否使用了與顯示尺寸匹配的版本。
- 抽查图片资源能否直接打開，狀態碼是否為 200。
- 確認 alt 描述與图片内容一致，没有空值或大段重复。
- 检查图片 CDN 的缓存與错誤回源策略，並為图片可用性加上监控。
图片優化不必一次做完。先處理首屏和列表頁里重复出現的那几張，通常就能看到明顯改善，之後再按固定节奏清理存量图片。