很多站点在做抓取自查时,會把注意力放在 robots、canonical、跳轉鏈這些“規則层”的問题上,却忽略了頁面里最占体积、最容易被浪費的一部分资源:图片。一個正文只有八百字的頁面,如果塞進五張原图直出的大图,實际下载量可能翻十几倍。這不僅影响用戶打開頁面的体驗,也會让 spider 在同样的抓取時間里,只能拿到更少的可用頁面。
為什么图片值得單獨做一次自查
图片同时影响三件事:頁面渲染速度、抓取资源的消耗、以及图片搜尋带来的額外入口。三者中任何一項出問题,都不會立刻表現為“網站挂了”,所以很容易長期被忽视。常见的表現包括:頁面首屏要等很久才出現内容、图片地址大量返回 404、同一張图存在多個尺寸版本却被重复抓取、图片地址里带着一長串參數導致看起来像無數個頁面。
一、先摸清图片家底
在動手改之前,先知道站点里到底有多少图片、都存在哪里。可以按下面几個维度做一次粗略統計:
- 數量與分布:哪些栏目图片最多,是正文配图、列表缩略图,還是装饰性图标。
- 平均体积:抽样几十張图,看看普遍是几十 KB 還是几 MB,超過几百 KB 的單图有多少。
- 来源:站内上传、第三方图床、還是直接引用外部站点,外鏈图片是否有失效風險。
- 重复度:同一張图是否存在多套尺寸、多個命名,散落在不同目錄。
這一步不需要专业工具,浏览器開發者工具的網絡面板、服務器日誌里的图片請求记錄,都能提供足够的信息。
二、压缩與格式選擇
图片優化的核心原則是:在肉眼几乎看不出差別的前提下,把字节數降下来。具体做法可以分层推進:
- 上传时按實际展示尺寸裁剪,不要传 3000px 宽的图,却只用 300px 顯示。
- 照片類内容優先使用 WebP 或 AVIF,並保留原格式作為兜底;图标、简單图形可以考虑 SVG。
- 用响應式图片(srcset / sizes)让不同屏幕拿到不同尺寸的文件,而不是所有人共用一張巨图。
- 如果使用了图片處理類 CDN 或對象存储的裁剪參數,注意把參數規范统一,避免同一張图生成大量不同參數地址。
需要提醒的是,格式和压缩率没有“一刀切”的最優解。商品图、截图、插画的诉求不同,建议按照片、插画、图标三類分別设定标准,並在上线後對比實际体积變化。
三、懒加载別把图片藏起来
懒加载可以顯著减少初次加载的流量,但如果實現方式不当,也可能让图片地址只存在于 JavaScript 逻辑里,spider 拿到的 HTML 中根本没有可识別的图片連結。几個需要注意的点:
- 首屏主图不要懒加载,否則會直接拖慢可见内容出現的時間。
- 使用原生 loading="lazy" 时,确保 src 指向真實地址,而不是留空的占位。
- 如果必须用脚本切換图片地址,尽量让初始 HTML 中存在一個可訪問的图片 URL,或提供 noscript 兜底。
- 避免用背景图承载有信息量的内容,纯 CSS 背景中的图片地址對抓取的友好度通常低于 img 标簽。
四、文件名與 alt 的實际作用
图片的文件名和 alt 属性,是图片搜尋和可訪問性的主要信息来源。做法可以简單一些:
- 文件名用简短、可讀的英文或拼音,多個單词用连字符分隔,避免 IMG_2039 這類無意义命名。
- alt 描述图片本身表達的内容,而不是堆砌關鍵詞。装饰性图片可以留空 alt。
- 同一篇文章内的多張图,alt 不必重复同一個句式。
這里不需要追求“每張图都有 alt”,而是让真正承载信息的图片有清晰描述。
五、失效图片與防盗鏈
图片失效往往比頁面 404 更隐蔽:頁面本身正常返回 200,只是某几張图加载失敗,用戶和蜘蛛都會看到一块空白。建议定期做以下检查:
- 掃描頁面中引用的图片地址,統計返回非 200 的比例,優先修复正文主图和商品图。
- 检查外鏈图床是否設定了防盗鏈,是否在特定 Referer 下拒绝訪問。
- 確認图片目錄没有被 robots.txt 誤屏蔽,否則图片搜尋的入口會一起消失。
- 移動端和桌面端使用的是否是同一套图片地址,避免只在一端失效。
六、可以逐項执行的检查清單
- 統計各栏目图片數量與平均体积,标出明顯偏大的類型。
- 检查是否存在原图直出、尺寸遠大于展示区域的情况。
- 確認照片類图片已啟用較新的压缩格式,並有兼容兜底。
- 核對首屏图片未被懒加载,其余图片有真實可訪問地址。
- 抽查图片文件名與 alt 是否具备基本描述性。
- 掃描失效图片,修复正文與列表頁中的關键图片。
- 確認图片目錄未被 robots.txt 屏蔽,图片地址參數已做收敛。
图片自查的目标不是把所有图压到最小,而是让每一張图都有存在的理由,並且能被正常加载、正常识別。做到這一点,頁面体积和抓取效率通常會一起改善。
建议把這項工作拆成两部分:新上传的图片從源头设定規范,歷史图片按栏目分批處理。一次全部重做既費力又容易出错,按栏目推進、每批驗證效果,反而更容易長期坚持下去。