站点运营

站点运营:图片與媒体资源自查,從体积到 alt 都過一遍

图片常占頁面体积的大头,也影响蜘蛛抓取、渲染和图片搜尋的收錄。這篇從体积格式、加载方式、alt 文本、文件命名、目錄權限到失效图片排查,给出一套可执行的图片自查流程,帮你把無效請求和抓取浪費降下来。

站点运营

站点运营:图片與媒体资源自查,從体积到 alt 都過一遍

很多站点运营的检查清單里,文本、連結、狀態碼都查了一遍,唯獨图片被跳過。但图片往往是頁面体积最大的部分,它同时影响三件事:用戶打開速度、蜘蛛渲染頁面的成本、以及图片搜尋能带来多少額外流量。图片没管好,前面做的一堆结构優化容易被拖後腿。

先看体积和格式

图片自查的第一步不是改代碼,而是打開開發者工具,按传輸体积排個序。通常問题集中在几類:

  • 上传前没压缩,單張主图几百 KB 甚至上 MB。
  • 用原图直接顯示成小尺寸缩略图,浏览器下载的還是大图。
  • 仍在大量使用 PNG 存照片類内容,格式選错了。
  • 同一張图在列表頁和詳情頁各存一份,没有复用。

處理方式比較直接:照片類内容優先用 WebP 或 AVIF,配一張兼容格式兜底;图标、插画類再考虑 SVG 或 PNG。顯示尺寸有多大,就按 1.5 到 2 倍准备图源,剩下的交给 srcset 让浏览器自己挑。

加载方式會不會影响蜘蛛

原生懒加载(loading="lazy")是目前主流搜尋引擎能够识別的,一般不必為了蜘蛛而全部取消。要留意的是另外两種做法:

  • 首屏主图也设成懒加载,導致首屏渲染慢半拍。
  • 图片地址由 JavaScript 拼接後注入,蜘蛛执行脚本不完整时可能拿不到图。
判断标准很简單:把 JavaScript 關掉再看頁面,如果正文图片区域大面积空白,就值得检查图片是否過度依赖脚本注入。

alt 文本和文件名

alt 的作用是「這張图在表達什么」,不是關鍵詞堆砌位。寫法可以简單一些:

  • 内容图:寫清對象和场景,比如「會议現场簽到台排队画面」。
  • 装饰图、分隔线、背景纹理:留空 alt,而不是随便填几個词。
  • 带連結的图片:alt 可以說明点击後去哪,和锚文本的作用接近。

文件名同样值得顺手改一下。IMG_2043.jpg 對任何一方都没有信息量,改成能讀懂的英文短词组,成本很低,長期看對图片搜尋有帮助。

图片目錄和抓取權限

有些站点為了防盗鏈或省流量,在 robots.txt 里屏蔽了图片目錄,或者在 CDN 上做了限制。做自查时確認两件事:图片所在的路径没有被誤挡;图片走的是獨立域名时,该域名的抓取没有被規則排除。另外,图片 URL 上挂一堆时效性參數(時間戳、随机數)會让同一張图出現大量不同地址,既不方便缓存,也让統計變得混乱。

失效图片和狀態碼

改版、換图床、迁移目錄之後,很容易留下一批 404 图片。它們不會像 404 頁面那样顯眼,但每次訪問都是一次無效請求。建议按固定周期抓取一次站点,筛出返回 404 或 403 的图片地址,能补的补,确實不要的就让它干净地返回 404,不要用一張占位图加 200 狀態碼糊過去。

顺手做一下图片 Sitemap

如果站点图片量較大,且希望图片搜尋有更多展示机會,可以在常規 Sitemap 里补充图片信息,或單獨建一份图片 Sitemap。這不是必须項,優先級低于前面几項,属于锦上添花。

一份可以照着走的自检顺序

  1. 按頁面体积排序,找出前二十張大图,逐個压缩或換格式。
  2. 確認首屏图片没有懒加载,確認關掉 JS 後正文图片仍可见。
  3. 抽查 alt 是否為内容服務,装饰图是否留空。
  4. 检查图片目錄是否被 robots.txt 或 CDN 規則誤挡。
  5. 跑一次全站抓取,導出图片 404 清單並逐條處理。
  6. 把以上步骤寫進上线的检查項,改版时按同一套流程走一遍。

图片自查不需要一次性做完,先解决体积和失效這两块,收益通常最直接。剩下的 alt、命名、Sitemap 属于長期维護項,配合内容更新节奏慢慢补齐即可。