图片SEO优化：完整检查清单

2026年3月20日 · 10 分钟阅读

在大多数网站上，图片约占页面总体积的 50%。未优化的图片是页面 Core Web Vitals 不达标的头号原因——而这会直接影响你的搜索排名。本清单涵盖 2026 年对 SEO 真正重要的每一项图片优化技巧。

为什么图片优化对 SEO 很重要

Google 把页面速度作为排名因素，而图片通常是页面上最重的资源。直接影响如下：

Core Web Vitals：LCP（最大内容绘制）往往是一张图片。如果你的主视觉图要 4 秒以上才加载，LCP 就不达标——Google 会惩罚你。
跳出率：53% 的移动访客会在页面加载超过 3 秒时离开（Google 数据）。
图片搜索流量：Google 图片占所有 Google 搜索的 20-30%。正确优化的图片能在图片搜索中排名并带来自然流量。
抓取预算：沉重的页面消耗更多抓取预算。更快的页面意味着每次会话能抓取更多页面。

速效之招：仅压缩图片就能让 LCP 改善 1-3 秒。这往往就是 Core Web Vitals 达标与否的分水岭。

完整的图片 SEO 检查清单

1. 压缩每一张图片

这是影响最大、成本最低的优化。上传前压缩所有图片：

格式	目标质量	预期节省
JPG/JPEG	75-85%	60-75%
PNG	无损优化	20-40%
WebP	75-85%	相比原图 70-85%

使用在客户端处理图片的工具（如 ImgMin——无需上传），避免把敏感图片上传到第三方服务器。按格式的指南：压缩 JPG、压缩 PNG、压缩 WebP。

2. 使用正确的格式

WebP 用于现代网页上的一切（97%+ 浏览器支持）
JPG 作为照片和复杂图像的回退
PNG 仅在你需要像素级图形、或在无 WebP 支持时需要透明的情况下使用
SVG 用于 Logo、图标和简单插画（无限缩放、体积极小）

用 <picture> 元素提供多种格式：

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image" width="1200" height="630">
</picture>

3. 缩放到显示尺寸

绝不要在 800×600 的位置放一张 4000×3000 的图片。这浪费带宽并拖累 LCP。

用 srcset 为不同视口提供不同尺寸
每张图生成 2-3 个尺寸：移动端（640px）、平板（1024px）、桌面（1920px）
设置 sizes 属性告诉浏览器该选哪个尺寸

<img
  srcset="photo-640.webp 640w, photo-1024.webp 1024w, photo-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  src="photo-1024.webp"
  alt="Descriptive alt text"
  width="1200" height="800">

4. 始终设置宽度和高度

没有明确的尺寸，浏览器在图片加载前无法为其预留空间。这会造成布局偏移——一个损害 Core Web Vitals 的 CLS（累积布局偏移）问题。

<!-- Bad: causes layout shift -->
<img src="photo.jpg" alt="Photo">

<!-- Good: browser reserves space -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

配合 CSS 的 aspect-ratio 或 height: auto，在防止偏移的同时实现响应式表现。

5. 写出描述性的 alt 文本

alt 文本是 Google 理解图片内容的主要方式。好的 alt 文本能帮你在网页搜索和图片搜索中同时排名。

差的 alt 文本	好的 alt 文本
`alt=""` (empty)	`alt="Golden retriever playing fetch in a park"`
`alt="image1.jpg"`	`alt="Bar chart showing Q3 2026 revenue growth"`
`alt="photo photo photo SEO keywords"`	`alt="Red Nike running shoes on a trail"`

alt 文本指南：

描述图片里「有什么」，而非它「是什么」
保持在 125 个字符以内
自然地包含相关关键词——不要堆砌
对装饰性图片，用 alt=""（空）以跳过屏幕阅读器

6. 使用描述性文件名

Google 会把文件名当作图片内容的信号来读取。

差：IMG_20260315_001.jpg、screenshot.png
好：golden-retriever-park.jpg、quarterly-revenue-chart.png

用连字符分隔单词。文件名保持小写、简洁、有描述性。

7. 实现懒加载

懒加载会把屏幕外的图片推迟到用户滚动到附近时再加载。这能显著改善首屏加载时间。

<!-- Native lazy loading (all modern browsers) -->
<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

<!-- Don't lazy-load above-the-fold images -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">

重要：绝不要懒加载你的 LCP 图片（通常是主视觉/横幅）。对首屏图片用 loading="eager" 和 fetchpriority="high"。其余的都懒加载。

8. 预加载关键图片

对你的 LCP 图片，告诉浏览器尽早获取它：

<link rel="preload" as="image" href="hero.webp" type="image/webp">

这能为 LCP 省下 200-500 毫秒，因为浏览器会在解析引用该图片的 HTML 之前就开始下载。

9. 用 CDN 分发图片

内容分发网络从离用户最近的服务器提供图片。好处：

为全球用户降低 50-80% 的延迟
自动格式转换（部分 CDN 会自动提供 WebP/AVIF）
通过 URL 参数即时缩放
内置缓存并带有合适的缓存头

10. 为图片添加结构化数据

用结构化数据帮助 Google 在上下文中理解你的图片：

产品图：使用 Product 架构的 image 属性
文章图：使用 Article 架构的 image 属性
食谱图：使用 Recipe 架构（富结果要求带图）

结构化数据中引用的图片更有可能出现在 Google 的富结果和图片轮播中。

11. 创建图片站点地图

如果你的图片对 SEO 很重要（产品照片、信息图），把它们加进你的站点地图：

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/photo.jpg</image:loc>
    <image:title>Product photo</image:title>
  </image:image>
</url>

12. 剥离不必要的元数据

EXIF 数据（相机型号、GPS 坐标、时间戳）每张图片增加 20-100 KB。上传前剥离它可以：

减小文件体积
保护隐私（移除 GPS 定位数据）
对视觉质量或 SEO 无影响

Core Web Vitals 影响汇总

优化项	CWV 指标	典型影响
压缩图片	LCP	-1 到 -3 秒
缩放到显示尺寸	LCP	-0.5 到 -2 秒
设置宽/高	CLS	消除图片布局偏移
懒加载	LCP, FID	更快的首屏加载
预加载 LCP 图片	LCP	-200 到 -500 毫秒
使用 WebP	LCP	传输体积 -25 到 -35%
CDN 分发	LCP	延迟 -50 到 -80%

从第 1 步开始：压缩你的图片

ImgMin 直接在你的浏览器中压缩 JPG、PNG 和 WebP。不上传、无服务器、无隐私风险。

免费压缩图片

快速参考清单

压缩所有图片（有损格式目标 75-85% 质量）
通过 <picture> 使用 WebP 并配 JPG/PNG 回退
把图片缩放到实际显示尺寸
在每个 <img> 上显式设置 width 和 height
写出描述性、含关键词的 alt 文本
使用描述性、带连字符的文件名
懒加载首屏以下的图片
用 fetchpriority="high" 预加载 LCP 图片
通过 CDN 分发图片以获得全球性能
为产品/文章图片添加结构化数据
把重要图片纳入你的站点地图
上传前剥离 EXIF 元数据

小结

图片优化是你能做的投资回报最高的 SEO 工作。仅压缩往往就能修复 Core Web Vitals 不达标。再配合恰当的尺寸、alt 文本、懒加载和现代格式——你会在页面速度和搜索排名上看到可衡量的提升。