
关于
SEO 图片优化,涵盖图片压缩、Alt 文本、懒加载和结构化数据标记。
name: seo-images description: > 图片优化分析,用于 SEO 和性能。检查 alt 文本、文件大小、格式、响应式图片、 懒加载和 CLS 预防。当用户提到"图片优化"、"alt 文本"、"图片 SEO"、 "图片大小"或"图片审计"时使用。 risk: safe source: "https://github.com/AgriciDaniel/claude-seo" date_added: "2026-03-21" user-invokable: true argument-hint: "[url]" allowed-tools:
- Read
- Grep
- Glob
- Bash
- WebFetch
图片优化分析
何时使用
- 审计图片 SEO、alt 文本、文件大小、格式或懒加载时使用。
- 用户需要图片相关的性能建议时使用。
- 检查影响 SEO 和 Core Web Vitals 的媒体质量信号时使用。
检查项
Alt 文本
- 所有 `<img>` 元素都有 alt 属性(装饰性图片除外:`role="presentation"`)
- 描述性:描述图片内容,而不是"image.jpg"或"photo"
- 在自然的地方包含相关关键词,不堆砌关键词
- 长度:10-125 个字符
好的示例:
- "Professional plumber repairing kitchen sink faucet"
- "Red 2024 Toyota Camry sedan front view"
- "Team meeting in modern office conference room"
差的示例:
- "image.jpg"(文件名,不是描述)
- "plumber plumbing plumber services"(关键词堆砌)
- "Click here"(非描述性)
文件大小
按图片类别分级阈值:
| 图片类别 | 目标 | 警告 | 严重 | |---------|------|------|------| | 缩略图 | < 50KB | > 100KB | > 200KB | | 内容图片 | < 100KB | > 200KB | > 500KB | | 首屏/横幅图片 | < 200KB | > 300KB | > 700KB |
建议在不损失质量的情况下压缩到目标阈值。
格式
| 格式 | 浏览器支持 | 使用场景 | |------|-----------|---------| | WebP | 97%+ | 默认推荐 | | AVIF | 92%+ | 最佳压缩,较新 | | JPEG | 100% | 照片的后备方案 | | PNG | 100% | 带透明度的图形 | | SVG | 100% | 图标、Logo、插图 |
推荐 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>
浏览器将使用第一个支持的格式。当前浏览器支持率:AVIF 93.8%,WebP 95.3%。
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">
<!-- 好 - CSS 宽高比 -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">
<!-- 差 - 没有尺寸 -->
<img src="photo.jpg" alt="Description">
文件名
- 描述性:`blue-running-shoes.webp` 而不是 `IMG_1234.jpg`
- 连字符分隔、小写、无特殊字符
- 包含相关关键词