保哥笔记

图片SEO优化完整指南：alt+WebP+懒加载实战

保哥这两年帮人做技术 SEO 评估时，发现图片这一块的优化质量普遍很低。绝大多数中文站点把 alt 属性堆满关键词、把 jpg 上传完事，至于现代浏览器普及的 WebP/AVIF、loading 懒加载、srcset 响应式、Image Sitemap、ImageObject 结构化数据这些手段，要么没听过，要么听过没落地。本文把图片 SEO 整条链路从命名、压缩、格式、属性、加载策略、结构化数据、CDN 到搜索引擎收录跟踪一次写清楚，附上我自己在 zhangwenbao.com 上跑的实测数据。

图片 SEO 真正的三个目标

很多教程一上来就讲细节，但不告诉你"做这件事到底想达到什么"。图片 SEO 的目标其实只有三个：

  1. 让 Google 图片搜索（Image Search）收录你的图片并带来流量。Google 图片搜索每天产生几亿次点击，对电商和媒体站是不可忽视的流量入口。
  2. 让正常网页搜索的搜索结果里附带你的图片缩略图，提升点击率（CTR）。
  3. 不要让图片拖慢页面加载速度，避免图片导致的 Core Web Vitals 评分下降反过来压低排名。

这三个目标对应不同的优化手段。alt 和文件名主要为目标 1，缩略图和结构化数据主要为目标 2，懒加载和压缩主要为目标 3。下面分块展开。

文件名：搜索引擎的第一道线索

很多人上传图片时直接用相机自动生成的 IMG_20251019_142537.jpg 或者 image-001.png。Google 图片搜索的索引算法第一步就是看文件名，文件名里的语义就是图片的主题词。正确做法：

WordPress 上传图片时会自动用文件名作为 alt 的兜底值，所以好的文件名等于赠送一个像样的 alt。批量改名工具用 Bulk Rename Utility（Windows）或 ImageMagick（Linux 服务器）。

alt 属性：不是关键词堆砌的地方

alt 属性的本意是给屏幕阅读器念出来的"图片描述"，让视障用户知道图上是什么。Google 在 SEO 文档里反复强调："alt 应该写得像你给电话另一头看不到屏幕的朋友描述图片一样自然"。错误示范：

<img src="iphone.jpg" alt="iphone iphone15 iphone15pro 苹果手机 钛蓝色 128GB 256GB 512GB">

正确示范：

<img src="iphone-15-pro-titanium-blue-front.jpg" alt="iPhone 15 Pro 钛蓝色款式正面图，显示 6.1 寸超视网膜 XDR 屏幕">

区别在哪？前者堆砌关键词、读起来像广告，搜索引擎反垃圾算法直接把这种当作低质量信号；后者描述自然、含核心关键词、对屏幕阅读器友好。

Google 官方给的 alt 写作清单：

  1. 描述图片实际内容，不是图片旁边的标题。
  2. 包含 1~2 个相关关键词，自然嵌入语境，不要堆砌。
  3. 长度 8~15 个中文字或 60~125 字符。
  4. 装饰性图片（比如分隔线、纯背景）alt 设空字符串 alt=""，让屏幕阅读器跳过。
  5. 同一页面上多张图片不要用相同的 alt。

WordPress 用户在媒体库的"替代文本"框里直接填，每次插入图片都填一下，养成习惯。

图片格式：何时用 WebP，何时保留 JPEG/PNG

2025 年的浏览器格局，AVIF 和 WebP 已经成为主流，按支持率：

实战推荐策略：

  1. 所有照片类图片转 WebP 上传，质量 75~80。同等观感下文件大小是 JPEG 的 50~70%。
  2. 需要透明背景的图标转 WebP（带 alpha 通道）或 PNG。
  3. logo 和简单图标用 SVG。
  4. 对支持率有疑虑的，用 <picture> 标签做格式回退：
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="保哥的工作桌面照片">
</picture>

浏览器会按顺序匹配第一个支持的格式。这种写法兼顾压缩率和兼容性。

压缩工具与质量取舍

未压缩的相机照片动辄 5~10MB，直接上传到网页是灾难。我自己用的工具链：

质量参数怎么定？我自己的标准：

压缩到什么文件大小算够？经验值：内容图（文章里的配图）控制在 100KB 以内；首屏 hero 图控制在 200KB 以内；缩略图控制在 30KB 以内。超过这个体积考虑再压一压。

响应式图片 srcset 与 sizes

同一张图片在桌面和手机上需要不同的尺寸——给手机送 1920px 宽的大图既浪费流量又耽误首屏渲染。HTML5 的 srcset 解决这个：

<img
  src="hero-1200.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1920.webp 1920w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 80vw,
         1200px"
  alt="保哥工作桌面图"
  loading="lazy"
  decoding="async"
  width="1200" height="800">

浏览器会根据屏幕宽度选择 srcset 里最合适的版本。一张 hero 图准备 4 个尺寸（400/800/1200/1920）几乎覆盖所有设备。WordPress 5.5+ 已经自动给媒体库图片生成 srcset，但生成的尺寸可能不符合你的设计断点，主题里可以用 add_image_size() 自定义。

懒加载 loading="lazy"

原生懒加载是 2020 年开始所有主流浏览器都支持的属性。在 img 上加 loading="lazy"，浏览器会等图片即将进入视口时才发请求。这是图片性能优化里 ROI 最高的一招。

注意几点：

尺寸属性 width/height 防 CLS

img 标签必须带 width 和 height 属性，浏览器才能在图片加载完之前预留出空间，避免布局突变（CLS）。这是 Core Web Vitals 三个核心指标之一，CLS > 0.1 会被 Google 评为差。

<img src="hero.webp" width="1200" height="800" alt="...">

注意 width/height 是 HTML 属性而不是 CSS。配合 CSS img { max-width: 100%; height: auto; } 让图片在小屏自适应，宽高比保持不变。

Image Sitemap 与 ImageObject 结构化数据

这两个动作是让 Google 图片搜索"知道"你站点上有哪些图片。

Image Sitemap

把站点上所有有 SEO 价值的图片列在专门的 sitemap-images.xml 里，提交到 Search Console。格式：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/posts/iphone-15-review</loc>
    <image:image>
      <image:loc>https://example.com/img/iphone-15-front.webp</image:loc>
      <image:caption>iPhone 15 Pro 正面图</image:caption>
      <image:title>iPhone 15 Pro 钛蓝色</image:title>
    </image:image>
  </url>
</urlset>

WordPress 用 RankMath 或 Yoast 都能自动生成图片 sitemap。

ImageObject 结构化数据

在文章页面的 head 里嵌一段 JSON-LD：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/img/iphone-15-front.webp",
  "name": "iPhone 15 Pro 钛蓝色正面",
  "description": "苹果发布会上展示的 iPhone 15 Pro 钛蓝色款式正面照",
  "creator": {"@type": "Organization", "name": "保哥笔记"},
  "license": "https://creativecommons.org/licenses/by/4.0/"
}
</script>

带 license 字段的图片会在 Google 图片搜索结果里显示"可授权使用"标签，点击率明显高。

水印的取舍

很多原创站怕图片被盗用，习惯打大水印。SEO 角度的现实：

我自己 zhangwenbao.com 的图片只在右下角打 30% 透明度的小标，完全不影响 Google 图片搜索流量。

CDN 与图片处理服务

对于流量较大的站点，把图片放到专门的图片 CDN 能省一半带宽费用。常用方案：

用 CDN 之后图片 URL 通常带域名前缀，记得在 Image Sitemap 里写 CDN 域名而不是源站域名。

实测数据：图片优化对 Core Web Vitals 的影响

保哥在 zhangwenbao.com 做的 A/B 测试，2025 年初统计：

图片优化对页面速度评分的影响是直接且巨大的。任何一个站点想做 SEO，图片这一块都不能省。

头图（hero image）的特殊处理

每篇文章首屏看到的那张大图直接决定 LCP 评分。头图的优化要单独处理：

这套对 LCP 的提升是肉眼可见的。我自己一篇热门文章加完 fetchpriority+preload 后 LCP 从 2.4s 直接降到 1.1s。

常见问题解答

WordPress 自动生成的多个尺寸图占空间太大怎么办？

WordPress 默认会生成 thumbnail、medium、large、full 四个尺寸，再加上主题自定义的尺寸，一张原图能膨胀成 6~10 个文件。优化办法：在 functions.php 里 remove_image_size() 删掉用不到的尺寸；用 ShortPixel 这类插件统一压缩；定期跑一次 Regenerate Thumbnails 清理废弃尺寸。我自己 zhangwenbao.com 把 large 和 medium_large 删掉，单图存储减少 40%。

WebP 在邮件客户端里显示不出来怎么办？

邮件客户端对 WebP 支持差，特别是 Outlook 桌面版完全不识别。如果你的站点会通过邮件发送图片（比如订阅推送），用 picture 标签做 jpeg 兜底，或者邮件正文里固定用 jpeg 格式。Web 端可以全部 WebP。

图片压缩到多少质量算合适？

WebP 75~80 是兼顾观感和体积的最佳点。低于 70 会出现明显色块，高于 90 体积膨胀但肉眼分辨不出区别。建议先用 80 跑一段时间观察用户反馈，没人抱怨清晰度就保持，否则微调到 85。

图片的 EXIF 信息要不要保留？

对外发布的图片要清掉 EXIF。EXIF 里可能包含拍照时的 GPS 位置、相机序列号、原始路径等敏感信息。WordPress 上传时勾选 ImageMagick 的"strip metadata"选项即可全部清空。原始版本本地留底用，对外只发清理后的版本。

给图片加链接对 SEO 有用吗？

有限。图片链接的锚文本是 alt 属性的文字，会传递一点权重，但远不如正文里文字超链接有用。建议是相关文章配图可以加链接到对应详情页，但不要为了加链接而加。让图片回到本职——传达视觉信息。

百度图片和 Google 图片的优化策略一样吗？

大体一样但有细微差别。百度对中文 alt 更敏感，建议百度站点 alt 用中文；百度图片搜索对图片来源页的整体权威性更看重，热门站点的图片优先。Google 对结构化数据更敏感，license 字段、ImageObject 配齐能拿到额外的搜索结果展示位。两个搜索引擎都要兼顾的话，全做就好，没有冲突。

带文字的图片要不要做 OCR？

不要把重要文字嵌入图片里，理由：搜索引擎不能完美 OCR 中文图片里的文字（Google 现在能 OCR 但准确率有限），而且这些文字 copy paste 不出来对用户也不友好。文字内容用 HTML 文字写在页面上，需要美化用 CSS。截图类图片在 alt 里把图中关键文字概括一遍即可。

每月跑一次的图片 SEO 体检

把图片优化做完一次还不够，需要每月做一次体检确保新增内容也合规：

  1. Search Console 的图片报告，看曝光数和点击数趋势是否健康。
  2. 用 Screaming Frog 爬全站，导出所有 img 标签，检查 alt 缺失、宽高缺失、过大文件。
  3. 抽 5~10 个高流量页面用 PageSpeed Insights 测一遍，看 LCP 是否在 2.5s 以内。
  4. 清理掉媒体库里没被任何文章引用的孤立图片，省存储和备份开销。

写在最后

图片 SEO 不是一招鲜的事情，是文件名、alt、格式、压缩、尺寸属性、懒加载、srcset、Image Sitemap、CDN 一整套配合。第一次做的话花两个工作日把现有站点全跑一遍，后续上传新文章时每张图都按规范处理。一个月后再去 Search Console 看图片报告，曝光数和点击数应该都有可观增长。我自己 zhangwenbao.com 的图片搜索流量在落实这套之后从月均 800 涨到 4500，对一个技术博客来说已经是显著加成。