站点运营

站点运营:图片与媒体资源自查,从体积到 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 属于长期维护项,配合内容更新节奏慢慢补齐即可。