图片 SEO：alt 文本、文件大小、格式与延迟加载

图片让页面更易理解，也更吸引人。它们还能从 Google 图片和视觉搜索功能带来访客。但图片通常是页面中最重的部分，未经优化的图片是网站缓慢最常见的原因之一。

图片 SEO 就是要兼顾两方面：让搜索引擎能理解图片、让每个人都能无障碍地访问图片，同时保持速度。

撰写有用的 alt 文本

alt 属性用文字描述图片：

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

alt 文本有三项任务：

1. 无障碍：屏幕阅读器会把它读给看不到图片的人听
2. 备用显示：图片加载失败时，浏览器会显示它
3. 理解：搜索引擎会结合周围的文字，用它来判断图片显示的内容

如何写好 alt 文本

• 描述图片显示了什么，以及它为什么出现在页面上
• 要具体：“折叠后放在书桌旁的红色 Brompton 折叠自行车”胜过“自行车”
• 保持简洁，通常不超过 125 个字符（中文约 50 个字）
• 不要以“……的图片”或“……的照片”开头；屏幕阅读器已经会说明这是一张图片
• 只在能自然描述图片的地方使用相关关键词

装饰性图片

纯装饰性的图片（分隔线、背景花纹）应使用空的 alt 属性：alt=""。这会告诉屏幕阅读器跳过它们。完全省略这个属性是错误的，有些屏幕阅读器会因此读出文件名。

使用描述性的文件名

IMG_4821.jpg 什么也没告诉任何人。brompton-folding-bike-folded.jpg 则给了搜索引擎另一个线索。使用小写英文单词（或拼音），并用连字符分隔。

选择合适的格式

对大多数网站来说，用 <picture> 元素提供 WebP 或 AVIF（必要时以 JPEG 作为备用）是单项改进中效果最大的：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

大多数 CMS、图片插件和 CDN 都能自动把图片转换为现代格式。

调整尺寸和压缩

一个常见的错误是把相机拍出的 4,000 像素宽的照片直接上传，然后以 800 像素宽显示。浏览器仍然会下载完整的文件。

• 把图片调整到实际显示的最大尺寸（如有需要，为高密度屏幕提供两倍尺寸）
• 压缩图片：质量设置在 75–85% 左右时，通常与原图看不出区别
• 目标是让大多数内容图片小于 150–200 KB，首屏大图最好小于 300 KB

提供响应式图片

手机不需要桌面尺寸的图片。srcset 和 sizes 属性让浏览器选择合适的文件：

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress 和大多数现代框架会自动生成这些属性。

设置宽度和高度以防止布局偏移

如果图片没有 width 和 height 属性，浏览器就不知道要预留多少空间，于是图片加载时内容会跳动。这会损害 Core Web Vitals 之一的 Cumulative Layout Shift（CLS）。始终写明图片的尺寸（或使用 CSS 的 aspect-ratio 属性）；响应式 CSS 仍然可以对它进行缩放。

对首屏以下的图片使用延迟加载

loading="lazy" 告诉浏览器，只在图片即将滚动进入视野时才加载它：

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

对页面较靠下的图片使用它，但不要用于主要的首屏大图。延迟加载首屏中最大的图片会推迟 Largest Contentful Paint。对于这张图片，可以考虑改用 fetchpriority="high"。

帮助图片被找到

• 把图片放在相关文字附近，并在有用时添加图片说明；Google 会利用周围的内容来理解图片
• 对有意义的图片使用标准的 <img> 元素，而不是 CSS 背景，以便搜索引擎找到它们
• 对于大型图片库，把图片加入 XML 站点地图或图片站点地图
• 在相关的结构化数据中包含图片（Product、Article、Recipe）
• 设置 og:image，让在社交网络上的分享显示出色的预览

图片 SEO 清单

• 每张有意义的图片都有描述性的 alt 文本；装饰性图片使用空 alt
• 描述性的、用连字符分隔的文件名
• WebP 或 AVIF 格式
• 调整到显示尺寸并经过压缩
• 使用 srcset 进行响应式提供
• 设置了宽度和高度属性
• 首屏以下的图片使用延迟加载，首屏大图不用
• 在服务器或 CDN 上设置了较长的缓存时间

电商网站的图片 SEO

商品图片承担了大量的销售工作。对网店来说：

• 展示多个角度和使用场景。 Google 图片和购物结果更青睐清晰、高质量的商品照片。
• 为每件商品使用一致、简洁的主图，它经常被用于购物结果。
• 撰写能识别商品和款式的 alt 文本：“Trail Runner X 女款跑鞋，青绿色，侧面图。”
• 使用绝对 URL 在 Product 结构化数据中包含图片。
• 可放大的图片应仅在需要时加载大图版本，而不是在页面加载时就加载。

博客和内容发布者的图片 SEO

• 尽可能使用原创图片。原创照片、示意图和图表可以赢得链接，并在图片搜索中脱颖而出；图库照片则被成千上万的网站使用。
• 当图片传达信息时，添加图片说明。图片说明是页面上阅读率最高的文字之一。
• 为复杂的主题制作便于分享的示意图和信息图，同时把关键信息也写成文字。
• 选择一张至少 1200 像素宽的优质特色图片。Google 探索更青睐大尺寸的高质量图片，你可以通过 max-image-preview:large robots 设置允许显示大图预览。

背景图片与 CSS

用 CSS background-image 设置的图片，对搜索引擎来说不是内容，也没有 alt 文本。只把它们用于装饰。如果图片承载了含义（商品、图表、团队照片），请使用 <img> 元素。

图片 CDN 与自动优化

手动管理多种尺寸和格式很快就会变得不切实际。图片 CDN 和相关服务（Cloudflare Images、Cloudinary、imgix、Bunny Optimizer 等，国内也有阿里云、腾讯云等提供的图片处理服务）以及许多 WordPress 插件可以：

• 自动把图片转换为 WebP 或 AVIF
• 针对每种设备实时调整尺寸
• 智能压缩
• 在靠近访客的位置缓存图片

如果你使用这类服务，要检查图片 URL 是否保持稳定且可以被抓取，以及 CDN 是否屏蔽了 Googlebot。

衡量效果

打开 Google Search Console 的“效果”报告，把搜索类型切换为图片，查看你的图片获得了多少点击和展示，以及来自哪些查询。在同一工具中跟踪 Core Web Vitals，确认图片优化正在改善 Largest Contentful Paint 和 Cumulative Layout Shift。

常见错误

1. 上传相机尺寸的照片，让浏览器去缩小它们
2. 缺少 alt 属性，或 alt 文本堆砌关键词
3. 对首屏大图使用延迟加载
4. 没有宽度和高度，导致布局偏移
5. 把文字嵌入图片中，而不是写在 HTML 里：搜索引擎和屏幕阅读器都看不到它，也无法翻译
6. 在 robots.txt 中屏蔽了图片文件夹

要点总结

• 撰写描述图片显示了什么以及为什么出现的 alt 文本；装饰性图片使用空 alt。
• 提供 WebP 或 AVIF，调整到显示尺寸并压缩。
• 始终设置宽度和高度，防止布局偏移。
• 对首屏以下的图片使用延迟加载，但绝不要用于主要的首屏大图。
• 对有意义的图片使用真正的 img 元素，放在相关文字附近，并使用描述性的文件名。
• 查看 Search Console 的图片搜索数据，衡量图片带来的流量。

常见问题

alt 文本有助于排名吗？

它有助于图片在 Google 图片中获得排名，并为页面增加上下文。它的主要目的是无障碍，而为人撰写的 alt 文本通常对搜索引擎也最有效。

应该用 WebP 还是 AVIF？

两者都得到了良好的支持。AVIF 生成的文件通常更小；WebP 编码更快，旧工具对它的支持也更广泛。许多网站提供 AVIF，并以 WebP 作为备用。

图片文件名重要吗？

有一点。描述性的文件名是一个小小的额外信号，也让你的媒体库更易管理。

延迟加载对 SEO 有好处吗？

是的，前提是用法正确。Google 支持原生的 loading="lazy"。只是不要对页面首次加载时就可见的图片使用延迟加载。