很多人做SEO，眼睛盯着关键词、外链、内容质量，却把图片优化这件事扔在角落里吃灰。

这篇文章我把图片SEO拆成三个核心板块来聊：Alt属性怎么写、文件怎么命名、加载性能怎么处理。不讲虚的，全是落地的东西。

---

一、Alt属性：不只是给搜索引擎看的

Alt到底是干什么的？

Alt属性（Alternative Text）最早的设计初衷是无障碍访问——当图片加载失败，或者用户使用屏幕阅读器时，Alt文本就是图片的”文字替身”。

但对SEO来说，Alt属性的意义远不止于此。Google的爬虫不会”看”图片，它理解图片内容的主要方式就是读Alt文本。你不写Alt，等于这张图在搜索引擎眼里是个黑箱。

Google官方文档说得很直白：Alt文本是判断图片与搜索查询相关性的核心信号之一。

写Alt的几个实操原则

1. 描述图片内容本身，别硬塞关键词

这是最常见的错误。很多人把Alt当成关键词填充的战场，写出来的东西像这样：

❌ alt="跑鞋 运动鞋 男士跑鞋 最佳跑鞋 跑步鞋推荐"

这种写法Google早就不吃了，甚至可能被判定为关键词堆砌。正确的做法是老老实实描述图片：

✅ alt="一双灰色轻量化男士跑鞋的侧面展示图"

2. 结合页面语境

同一张咖啡豆的图片，放在”咖啡豆种类介绍”的页面和”手冲咖啡教程”的页面里，Alt应该不一样：

• 种类介绍页：alt=”埃塞俄比亚耶加雪菲水洗处理的咖啡生豆”
• 冲泡教程页：alt=”手冲咖啡前称量15克咖啡豆”

Alt不是孤立存在的，它要跟页面主题对得上。

3. 控制长度

Alt文本不需要写小作文。一般控制在10-15个英文单词（中文20-30个字）以内就够了。太长了屏幕阅读器念起来也累，搜索引擎也未必会全读完。

4. 装饰性图片可以留空

页面上纯装饰用的图标、分隔线、背景纹理之类的，Alt直接写成空字符串 alt=””。注意是写了Alt但值为空，而不是不写Alt属性——这两者在HTML层面有区别。

一个容易忽略的点

如果你的图片本身就是链接（比如点击图片跳转到产品详情页），这时候Alt承担的其实是锚文本的角色。写的时候要描述链接指向的内容，而不只是图片内容。

比如一张产品图链接到详情页：

✅ alt="查看这款轻量化跑鞋的详情及价格"

---

二、文件命名：很多人从第一步就输了

为什么文件名重要？

图片的文件名是搜索引擎获取图片信息的第一个线索。在爬虫还没读到Alt属性之前，它先看到的是URL里的文件名。

你用手机拍了一张产品图，直接上传，文件名是 IMG_20240315_142856.jpg——这串字符对Google来说毫无意义。

文件命名的规范

1. 用描述性的英文单词

即使你的网站是中文站，图片文件名也建议用英文（或拼音）。原因很简单：URL编码后中文会变成一堆 %E4%B8%AD 这样的乱码，可读性极差。

❌ IMG_20240315.jpg
❌ 产品图-1.jpg
✅ grey-lightweight-mens-running-shoe.jpg

2. 用连字符分隔单词

Google把连字符 – 当作单词分隔符，但不认下划线 _。所以 red-running-shoe.jpg 会被理解为三个词，而 red_running_shoe.jpg 会被当成一个整体。

这是个老规矩了，但我到现在还经常看到有人用下划线甚至空格（空格在URL里会变成 %20）。

3. 简洁但有信息量

文件名不用写得特别长，抓住核心信息就行：

✅ blue-ceramic-coffee-mug.jpg
❌ the-best-blue-ceramic-coffee-mug-for-morning-coffee-lovers-2024.jpg

4. 跟Alt属性形成呼应

文件名和Alt不需要一模一样，但应该在语义上对得上。如果文件名叫 sunset-beach.jpg，Alt写的是”一杯拿铁咖啡”，这种矛盾信号对SEO没好处。

批量重命名的现实问题

如果你的站已经跑了一段时间，有几千张图片都是 IMG_xxx.jpg 这种命名，要不要全改过来？

我的建议是分优先级。先把核心产品页、流量大的文章页上的图片改掉，做好301重定向或者在CDN层面处理好旧URL的映射。不要一次性全改，容易出乱子。

新上传的图片从现在开始严格执行命名规范就行。

---

三、加载性能：图片优化的重头戏

图片是大多数网页里体积最大的资源类型。HTTP Archive的数据显示，图片平均占网页总传输量的40%以上。页面速度是Google排名因素之一（尤其2021年Core Web Vitals正式纳入排名信号之后），所以图片加载性能直接关系到SEO表现。

选对格式

先说格式选择，这是最基础也最容易出效果的一步。

2024到2025年这个阶段，WebP基本上可以作为默认格式了。全球浏览器支持率已经超过97%。如果你还在大面积用JPEG和PNG，切到WebP大概率能省掉30%左右的图片体积，这是最省力的性能提升。

AVIF更激进一些，压缩效果更好，但部分浏览器的支持还不够完善（虽然在持续改进中）。好在我们可以用 <picture> 标签做格式降级，让浏览器自动选择它支持的最优格式：

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" alt="产品展示图" width="800" height="600">
</picture>

压缩：在质量和体积间找平衡

格式选对了，还要压缩。未经压缩的图片直接扔到网页上，是对用户带宽的不尊重。

几个常用工具和方案：

• 在线压缩工具：比如Squoosh，支持各种格式互转，可以实时对比压缩前后的画质差异，适合少量图片手动处理
• CMS压缩插件：如果你用WordPress之类的CMS，有不少成熟的图片压缩插件可以自动处理上传的图片
• 代码层面批量处理：Node.js的Sharp、Python的Pillow都是成熟的图片处理库，适合在构建流程中集成

压缩质量的设置，JPEG/WebP一般设在75-85之间，肉眼几乎看不出差别，但体积能减掉一大块。低于70画质下降会比较明显，高于90则体积收益递减。

响应式图片：别让手机加载桌面端的大图

这是一个被大量网站忽视的问题。你的首页Banner可能是2400px宽、800KB的大图，在桌面端看着挺好，但手机屏幕才375px宽，加载那么大的图完全是浪费。

用 srcset 和 sizes 属性来做响应式适配：

<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
  alt="首页主视觉banner"
  width="1600"
  height="600"
>

浏览器会根据设备屏幕宽度和像素密度，自动选择最合适的图片尺寸去加载。这对移动端性能的提升非常显著。

懒加载：首屏之外的图片不着急

浏览器原生支持懒加载已经好几年了，加一个属性就行：

<img src="product.webp" alt="产品图" loading="lazy" width="600" height="400">

loading=”lazy” 的意思是：这张图进入视口（viewport）附近时才开始加载。对于长页面来说，这能大幅减少首次加载时的网络请求量。

但有一个关键点：首屏可见的图片不要加lazy。 LCP（Largest Contentful Paint）元素如果被设成懒加载，反而会拖慢核心指标。首屏大图应该用 loading=”eager”（默认值）甚至配合 fetchpriority=”high” 来提升加载优先级：

html

<img src="hero.webp" alt="首页主图" loading="eager" fetchpriority="high" width="1200" height="500">

明确指定宽高，防止布局偏移

在 <img> 标签里写上 width 和 height 属性，或者用CSS设置 aspect-ratio，这不是为了控制显示尺寸，而是让浏览器在图片加载之前就知道它的宽高比，提前预留空间。

不这么做的后果就是CLS（Cumulative Layout Shift）飙高——页面加载过程中内容不停跳动，用户体验差，Google也会扣分。

CDN加速

如果你的网站有国际流量，或者图片资源量比较大，上CDN是性价比很高的选择。市面上主流的CDN服务都可以满足需求。CDN除了做地理分发加速，很多还提供自动格式转换（根据浏览器支持自动返回WebP/AVIF）和实时裁剪的能力。

---

四、几个经常被问到的问题

图片站点地图有必要做吗？

有必要，尤其是电商站和图片内容比较多的站。图片站点地图能帮Google更快发现和索引你的图片。如果你用WordPress搭配主流的SEO插件，图片站点地图通常会自动生成。

图片周围的文字对SEO有影响吗？

有。Google不只看Alt和文件名，它还会参考图片周围的文本内容（图片标题、上下文段落、caption等）来理解图片的主题。所以把图片放在语义相关的内容附近，是有加分的。

AI生成的图片需要特别处理吗？

从SEO角度看，Google目前不区分AI生成图片和真实照片——只要图片跟内容相关、提供价值就行。但Google有在元数据层面关注AI生成内容的标识（比如C2PA标准），未来可能会有更多动态。目前该怎么优化还是怎么优化，Alt、命名、压缩一个都不能少。

---

五、一套可以直接用的检查清单

最后给一个实操清单，每次上传图片前过一遍：

• 文件名是否是描述性的英文命名，用连字符分隔
• Alt属性是否准确描述了图片内容
• 格式是否选对了（优先WebP）
• 是否经过压缩（质量75-85）
• 是否提供了响应式尺寸（srcset）
• 首屏图片是否用了eager加载 + fetchpriority=”high”
• 非首屏图片是否设置了loading=”lazy”
• img标签是否指定了width和height
• 图片是否放在语义相关的内容附近

---

写在最后

图片SEO不是什么高深的技术活，但它确实是一个系统工程——从文件命名到Alt撰写，从格式选择到加载策略，每个环节做对了都是小幅度的加分，叠加起来对整站的SEO表现和用户体验有实打实的提升。

特别是对于电商站、旅游站、美食站这些图片密集型网站，图片优化做得好不好，直接关系到你在Google图片搜索里能不能分到流量。而Google图片搜索的流量，很多行业里是被严重低估的。

别等到PageSpeed Insights给你打了个红色的30分才想起来搞图片优化。从今天开始，把它纳入日常的内容发布流程里。