很多站点在做抓取自查时,会把注意力放在 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 屏蔽,图片地址参数已做收敛。
图片自查的目标不是把所有图压到最小,而是让每一张图都有存在的理由,并且能被正常加载、正常识别。做到这一点,页面体积和抓取效率通常会一起改善。
建议把这项工作拆成两部分:新上传的图片从源头设定规范,历史图片按栏目分批处理。一次全部重做既费力又容易出错,按栏目推进、每批验证效果,反而更容易长期坚持下去。