mcpField
I
image-seo-audit

image-seo-audit

github.com/indranilbanerjee营销与增长913106 次安装今天更新
代码仓库

关于 image-seo-audit

image-seo-audit 是面向 SEO 和 Web 团队的图像优化审计技能，可检查单页或全站图片的无障碍、性能和 SEO 问题，并按预计文件体积影响排列优化建议。

主要功能

  1. 01审查图片替代文本和文件名
  2. 02检查文件大小与图片格式
  3. 03检查响应式图片设置
  4. 04检查延迟加载和 fetchpriority
  5. 05标记尺寸缺失及 CLS 风险
  6. 06按预计节省量排列建议

适用场景

  1. 01查找拖慢页面的大体积图片
  2. 02识别缺失或质量不佳的替代文本
  3. 03在全站 SEO 审计中检查图片交付

安装

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

$npx skills add https://github.com/indranilbanerjee/digital-marketing-pro --skill image-seo-audit

安装后在 Claude Code 中输入/image-seo-audit确认已加载。

详细介绍

/digital-marketing-pro:image-seo-audit

目的

执行专门的图像优化审计，评估页面或网站上的所有图像在 SEO、性能和无障碍方面的表现。生成按文件大小影响排序的优化优先级列表。

所需输入

  • URL：要审计的页面或网站
  • 范围：单个页面或全站爬取（默认：单个页面）

流程

  1. 加载品牌背景：读取当前品牌档案，了解行业背景。
  2. 发现图像：查找所有 <img>、<picture>、CSS background-image 和 <source> 元素。
  3. Alt 文本审计：检查是否存在 alt 文本、质量、关键词包含情况和长度（10-125 个字符）。标记：缺失、仅文件名（"image.jpg"）、关键词堆砌、描述不明确（"click here"）。
  4. 文件大小审计：按图像类别应用分级阈值——缩略图（目标 <50KB，>200KB 为严重问题）、内容图像（目标 <100KB，>500KB 为严重问题）、主视觉/横幅（目标 <200KB，>700KB 为严重问题）。
  5. 格式审计：检查是否使用现代格式。建议使用 WebP（支持率 97%+）或 AVIF（支持率 92%+），而非 JPEG/PNG。检查是否使用带格式回退的 <picture> 元素。注意：JPEG XL 已于 2025 年 11 月在 Chromium 中恢复支持，但尚未进入 Chrome 稳定版——持续关注，暂不建议使用。
  6. 响应式图像：检查 srcset 和 sizes 属性，以及图像分辨率是否适合设备像素比。
  7. 延迟加载：确认首屏以下的图像使用 loading="lazy"。标记首屏/主视觉图像上的 loading="lazy"（会直接损害 LCP）。
  8. fetchpriority：检查 LCP/主视觉图像是否使用 fetchpriority="high"。检查非 LCP 图像是否使用 decoding="async"。
  9. CLS 防护：检查所有 <img> 元素是否具有 width 和 height 属性或 aspect-ratio CSS。标记未设置尺寸的图像。
  10. 文件命名：检查文件名是否具有描述性、使用连字符且为小写，而非通用名称（IMG_1234.jpg）。
  11. CDN 使用情况：检查图像是否通过 CDN 提供（不同域名、CDN 标头、边缘缓存）。
  12. 评分并确定优先级：按文件大小节省量排序（从高到低）。

推荐的 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>

主视觉/LCP 图像模式

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

请勿对首屏/LCP 图像进行延迟加载。请勿对 LCP 图像添加 decoding="async"。

输出

图像审计摘要
指标状态数量
图像总数—XX
缺少 Alt 文本问题XX
体积过大（>200KB）问题XX
格式不当（非 WebP/AVIF）问题XX
未设置尺寸（CLS 风险）问题XX
未延迟加载（首屏以下）问题XX
LCP 未设置 fetchpriority问题XX
优化优先级列表

按预计文件大小节省量排序（从高到低）：

图像当前大小格式问题预计节省量
hero.jpg450KBJPEG未使用 WebP，未设置 fetchpriority~300KB
...............
建议（按优先级排序）
  1. 将 X 张图像转换为 WebP 格式（预计总共节省 XX KB）
  2. 为 X 张图像添加 Alt 文本
  3. 为 X 张图像添加 width/height 尺寸
  4. 为 X 张首屏以下图像启用延迟加载
  5. 为 LCP 图像添加 fetchpriority="high"
  6. 压缩 X 张体积过大的图像
  7. 使用带 AVIF/WebP 回退的 <picture> 元素

使用的 Agent

  • seo-specialist — 图像优化分析、CWV 影响评估

使用的脚本

  • tech-seo-auditor.py — 获取页面并分析图像元素

评论

支持 Markdown