站点运营

站点运营:图片资源自查,让蜘蛛看懂图也别让页面变重

图片往往是页面上体积最大、又最容易被忽略的部分。本文按体积与格式、尺寸与响应式、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 规则挡住。
  • 换域名或换存储后,老图片地址是否还能正常访问。
图片不是“顺手处理一下”的事。它占的体积最大,又最容易被蜘蛛误读,花半小时过一遍,往往能同时省下带宽和抓取时间。

图片处理得干净,页面轻了,蜘蛛在同样的抓取预算里能走更多页面,用户打开的等待也短了。这件事没有一次性做完的说法,把它放进日常的发布检查里更现实。