站点运营

站点运营:图片资源自查,让蜘蛛看懂图也別让頁面變重

图片往往是頁面上体积最大、又最容易被忽略的部分。本文按体积與格式、尺寸與响應式、alt 與文件名、图片里的信息、抓取路径几個方面,给出一份可以照着走的图片资源自查清單,帮助站点在带宽和抓取效率上少走弯路。

站点运营

站点运营:图片资源自查,让蜘蛛看懂图也別让頁面變重

图片通常是頁面上平均体积最大的资源,也是最容易被放過的一块。很多站点把正文改得很干净,却在列表頁挂了十几張原图直出的缩略图,蜘蛛来一趟,带宽和時間都花在了這里。图片自查不需要多深的技術背景,按下面几項顺序過一遍就够。

先看体积,再看格式

  • 内容图單張控制在 100–200KB 比較稳妥,首屏大图可以放宽,但一般也不建议超過 300–500KB。
  • 缩略图不要用原图靠 CSS 缩小。浏览器下载的仍然是原文件,蜘蛛拿到的也是原文件。
  • 能用 WebP 或 AVIF 就用,同画质下通常比 JPEG 小不少;需要兼容老环境时用 picture 元素保留一份回退格式。
  • 重点翻一翻歷史文章里的图,老内容往往是体积失控的重灾区。

尺寸與响應式

用 srcset 和 sizes 让不同屏幕取到不同文件,是成本較低的一步。移動端蜘蛛拿到移動版頁面时,如果图片還是桌面大图,這次抓取就有点浪費。另外,後台生成的缩略图規格不要太多,尺寸重复的副本既占存储,也會让图片目錄變得难以管理。

alt 與文件名

alt 寫清楚這張图表達的信息就够了。一張展示区域销量走势的图表,alt 寫成“第三季度华東区销量走势”比堆一串關鍵詞有用得多,也更符合它的實际作用。

  • 装饰性图片、分隔线、纯背景图用空 alt 或 aria-hidden,不要硬塞描述。
  • 文件名用短横线分隔的英文或拼音,比 IMG_2031.jpg 好,但不必為了關鍵詞把文件名寫成一句话。
  • 同一張图在多個頁面复用时,alt 可以按上下文微調,不必全站一模一样。

重要信息別只存在于图里

價格表、活動規則、參數對比做成图片,蜘蛛讀不到里面的文字,用戶也没法複製。這類内容尽量用 HTML 表格或文字排版,图片只做辅助說明。如果确實只能用图,至少在图下方补一段文字,把關键信息用文字再说一遍,同时也能照顾到屏幕阅讀器。

图片的抓取路径

图片常放在 CDN 或獨立目錄,需要確認 robots.txt 没有把整段图片路径挡住。如果站点本来就不打算做图片搜尋流量,屏蔽是可以的選擇,但那是主動取舍,不是預設被挡。图片站点地图能帮蜘蛛發現那些只在脚本里出現的图,優先級不算高,先把正文图處理好再考虑它。還有一点常被忽略:換 CDN、換存储目錄时做好重定向,否則老图片地址會陆續變成 404,頁面上留下一個個空洞。

一份可以照着走的自查清單

  • 随机抽十個頁面,看開發者工具里体积最大的几個文件是不是图片。
  • 列表頁缩略图用的是缩略图文件,還是原图缩放。
  • 内容图有没有 alt,装饰图有没有留空。
  • 關键信息是否只存在于图片里。
  • 图片目錄有没有被 robots.txt 或 CDN 規則挡住。
  • 換域名或換存储後,老图片地址是否還能正常訪問。
图片不是“顺手處理一下”的事。它占的体积最大,又最容易被蜘蛛誤讀,花半小时過一遍,往往能同时省下带宽和抓取時間。

图片處理得干净,頁面轻了,蜘蛛在同样的抓取预算里能走更多頁面,用戶打開的等待也短了。這件事没有一次性做完的说法,把它放進日常的發布检查里更現實。