图片优化做不好拖慢收录速度试试这几个处理办法

做网站内容运营时，很多人只盯着文字关键词和内外链，却忽略了页面里的图片资源对搜索引擎抓取和排序的影响。其实图片优化是技术SEO里很实在的一环，处理得当能让爬虫更顺畅地理解页面，也能改善真实用户的访问体验。

为什么图片会拖慢搜索引擎抓取

搜索引擎蜘蛛在抓取一个页面时，会计算页面整体加载消耗的资源。如果一篇文章配了五六张没压缩的原创图，单张都在2MB以上，整个页面HTML加资源可能超过10MB。爬虫为了保证效率，往往会对慢响应页面降低抓取优先级，长尾词收录就会变慢。

另外，很多站点直接用相机原图文件名如DSC_0023.JPG，alt属性留空。爬虫虽然能通过上下文文字判断主题，但缺乏图片语义标注时，图片搜索流量和富媒体展现机会基本拿不到。

压缩与格式选择的实际操作

现在主流浏览器对WebP支持已经很普遍，同样视觉质量的图，WebP比JPEG小30%左右。我们用Node写一个简单的批处理脚本，把上传目录里的JPG转成WebP：

const sharp = require('sharp');
const fs = require('fs');
const path = 'uploads';
fs.readdirSync(path).forEach(file => {
  if (file.endsWith('.jpg')) {
    sharp(`${path}/${file}`)
      .webp({ quality: 80 })
      .toFile(`${path}/${file.replace('.jpg','.webp')}`);
  }
});

如果担心旧浏览器兼容，可以用<picture>标签做降级：

<picture>
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="产品实拍图">
</picture>

下面是一组常见格式在同等内容下的体积对比：

文件名与alt属性的写法细节

不少人为省事批量上传，服务器自动命名。但从SEO角度，图片文件名应带核心词，比如blue-running-shoes-side.jpg就比img017.jpg友好。alt文本要准确描述内容，别堆关键词。一张讲咖啡冲煮的图，alt写“手冲咖啡滤杯注水过程”比“咖啡 好喝 便宜 推荐”合规得多。

我们在一个家居博客做过对比：把三百篇文章的空alt补全为自然语言描述，两个月后图片搜索带来的会话增长了约四成，证明语义标注确实有用。

用懒加载减少首屏压力

图文混排的长页面，如果所有图都在首屏加载，TTFB和LCP都会变差。给非首屏图加loading="lazy"是最低成本的做法：

需要注意，懒加载的图也要保证有稳定可抓取的src，不要用纯JS动态塞链接，否则爬虫可能看不到。我们曾用三角替换方案：服务端渲染出真实src，前端再接管滚动逻辑，收录没受影响。

图片站点地图别忽视

Google和百度都支持在站点地图里单列图片地址。对以图为主的站点，比如菜谱、穿搭，提交图片sitemap能加速被发现。示例片段：

<url>
  <loc>https://example.com/post/123</loc>
  <image:image>
    <image:loc>https://example.com/img/123.webp</image:loc>
    <image:title>家常红烧肉成品图</image:title>
  </image:image>
</url>

图片优化落到实处就是改文件名、压体积、写alt、控加载、交地图这几件事。没必要追求一步到位，先拿流量最差的栏目做样板，跑出数据再铺开，比盲目全站重构更稳。