mcpField
3
30x-seo-images

30x-seo-images

github.com/norahe0304-art营销与增长5662 次安装33 周前更新
代码仓库

关于 30x-seo-images

用于 SEO 图片审计的技能，检查图片标记和资源的无障碍信息、文件大小、格式、响应式设置、加载方式及布局稳定性，并生成按优先级排列的优化建议。

主要功能

  1. 01审查替代文本和文件名
  2. 02检查图片大小与格式
  3. 03检查响应式图片属性
  4. 04检查延迟加载和获取优先级
  5. 05标记缺少尺寸及 CLS 风险
  6. 06排列优化建议优先级

适用场景

  1. 01审计网站图片的 SEO 问题
  2. 02查找体积过大或格式低效的图片
  3. 03改善图片加载和布局稳定性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/norahe0304-art/30x-seo --skill 30x-seo-images

安装后在 Claude Code 中输入/30x-seo-images确认已加载。

详细介绍

图像优化分析

检查项

替代文本
  • 所有 <img> 元素都包含替代文本（装饰性图像除外：role="presentation"）
  • 描述性：描述图像内容，而非“image.jpg”或“photo”
  • 自然地包含相关关键词，不要堆砌关键词
  • 长度：10-125 个字符

良好示例：

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

不良示例：

  • “image.jpg”（文件名，不是描述）
  • “水管工 水管维修 水管工服务”（堆砌关键词）
  • “点击此处”（缺少描述性）
文件大小

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

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

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

格式
格式浏览器支持率用途
WebP97%+默认推荐
AVIF92%+压缩效果最佳，较新
JPEG100%照片的后备格式
PNG100%带透明背景的图形
SVG100%图标、徽标、插图

建议优先使用 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">


<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 张过大的图片

[PROTOCOL]：更改时更新此标头，然后检查 CLAUDE.md

评论

支持 Markdown