seo-images

图像优化分析

适用场景

• 审查图像 SEO、替代文本、文件大小、格式或懒加载时使用。
• 用户需要针对图像的性能建议时使用。
• 检查影响 SEO 和 Core Web Vitals 的媒体质量信号时使用。

检查项

替代文本

• 为信息性图像提供有意义的替代文本；装饰性图像应使用 alt=""，而不是仅仅省略 alt 或依赖 role。
• 描述性：描述图像内容，而不是使用“image.jpg”或“photo”
• 自然地包含相关关键词，避免关键词堆砌
• 文本应尽可能简洁，同时满足图像用途；10–125 个字符并非普遍适用的无障碍要求。

良好示例：

• “专业水管工正在维修厨房水槽龙头”
• “红色 2024 款 Toyota Camry 轿车正面图”
• “现代办公室会议室中的团队会议”

不良示例：

• “image.jpg”（这是文件名，不是描述）
• “水管工 管道 水管工服务”（关键词堆砌）
• “点击这里”（缺乏描述性）

文件大小

按图像类别划分的分级阈值：

图像类别	目标值	警告阈值	严重阈值
缩略图	< 50KB	> 100KB	> 200KB
内容图像	< 100KB	> 200KB	> 500KB
主视觉／横幅图像	< 200KB	> 300KB	> 700KB

在不损失画质的前提下，尽可能建议压缩至目标阈值。

格式

格式	浏览器支持率	使用场景
WebP	97%+	默认推荐
AVIF	92%+	压缩效果最佳，格式较新
JPEG	100%	照片的后备格式
PNG	100%	带透明效果的图形
SVG	100%	图标、徽标、插图

建议使用 WebP／AVIF，而不是 JPEG／PNG。检查是否使用了带格式回退的 <picture> 元素。

推荐的 <picture> 元素模式

按格式效率从高到低排列，采用渐进增强：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

浏览器会使用其支持的第一个格式。应核实当前目标浏览器的支持情况，而不要依赖过时的整体支持率数据。

JPEG XL：新兴格式

2025 年 11 月，Google 的 Chromium 团队推翻了其 2022 年的决定，并宣布将使用基于 Rust 的解码器恢复 Chrome 对 JPEG XL 的支持。该实现已完成功能开发，但尚未进入 Chrome 稳定版。JPEG XL 支持无损 JPEG 重压缩（节省约 20%，画质完全无损），有损压缩效果也很有竞争力。目前还不适合实际用于 Web 部署，但值得关注其未来应用。

响应式图像

• 使用 srcset 属性提供多种尺寸
• 使用与布局断点相匹配的 sizes 属性
• 根据设备像素比提供适当分辨率

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

懒加载

• 对首屏以下的图像设置 loading="lazy"
• 不要对首屏／主视觉图像进行懒加载（会损害 LCP）
• 检查使用的是原生懒加载还是基于 JavaScript 的懒加载

<img src="photo.jpg" loading="lazy" alt="Description">


<img src="hero.jpg" alt="Hero image">

为 LCP 图像设置 fetchpriority="high"

为主视觉／LCP 图像添加 fetchpriority="high"，使浏览器网络队列优先下载该图像：

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

重要： 不要对首屏／LCP 图像进行懒加载。在 LCP 图像上使用 loading="lazy" 会直接损害 LCP 得分。loading="lazy" 仅用于首屏以下的图像。

为非 LCP 图像设置 decoding="async"

为非 LCP 图像添加 decoding="async"，避免图像解码阻塞主线程：

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

防止 CLS

• 为所有 <img> 元素设置 width 和 height 属性
• 可使用 aspect-ratio CSS 作为替代方案
• 标记缺少尺寸的图像

<img src="photo.jpg" width="800" height="600" alt="Description">


<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">


<img src="photo.jpg" alt="Description">

文件名

• 使用描述性文件名：blue-running-shoes.webp，而非 IMG_1234.jpg
• 使用连字符分隔，全小写，不含特殊字符
• 包含相关关键词

CDN 使用情况

• 检查图像是否通过 CDN 提供（不同域名、CDN 标头）
• 对图像较多的网站建议使用 CDN
• 检查边缘缓存标头

输出

图像审计摘要

指标	状态	数量
图像总数	-	XX
缺少替代文本	❌	XX
超大图像（>200KB）	⚠️	XX
格式不正确	⚠️	XX
无尺寸信息	⚠️	XX
未延迟加载	⚠️	XX

优先优化列表

按文件大小影响排序（节省空间最多的排在最前）：

图像	当前大小	格式	问题	预计节省空间
...	...	...	...	...

建议

1. 将 X 张图像转换为 WebP 格式（预计节省 XX KB）
2. 为 X 张图像添加替代文本
3. 为 X 张图像添加尺寸信息
4. 为页面首屏以下的 X 张图像启用延迟加载
5. 压缩 X 张超大图像

错误处理

情况	操作
URL 无法访问	报告连接错误及状态码。建议验证 URL，并检查网站是否需要身份验证。
页面上未找到图像	报告未检测到任何 <img> 元素。建议检查图像是否通过 JavaScript 或 CSS background-image 加载。
图像位于 CDN 后或需要身份验证	说明无法直接访问图像文件以分析大小。报告可用的元数据（标记中的替代文本、尺寸、格式），并标记无法访问的资源。

局限性

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停止并寻求澄清。