古法编程

如何利用 AI 进行网页图片 SEO 优化与性能审计

解决网页加载慢和搜索排名低的问题：通过 AI 自动化审计图片的 Alt 属性、文件大小、格式及响应式策略，提供可量化的优化建议以提升用户体验和搜索引擎可见度。

为什么需要这个技能

图片通常是网页中占用带宽最大的资源。不规范的图片使用会导致多种问题：缺乏 Alt 文本使得搜索引擎无法理解图片内容，影响 SEO；过大的文件体积导致页面加载缓慢；而缺失尺寸定义（width/height）则会导致严重的布局偏移（CLS），直接降低 Core Web Vitals 评分。

通过本技能，AI 可以快速扫描页面所有图像资源，识别出不符合最佳实践的项，并给出具体的替代方案（如将 JPEG 转换为 WebP），将繁琐的单页审计工作自动化。

适用场景

  • SEO 专项审计：检查全站图片是否缺失描述性 Alt 文本。
  • 性能调优：识别超出阈值的大体积图片，分析格式是否过时。
  • 用户体验优化：诊断 LCP（最大内容绘制）图像是否被错误地设置了懒加载。
  • 响应式检查：验证 srcset 和 sizes 属性是否正确配置。

核心工作流

  1. 多维度扫描：AI 通过 WebFetch 等工具获取 HTML 结构，分析所有 <img> 和 <picture> 标签。
  2. 合规性判定：
    • Alt 文本：检查是否包含描述性文字，排除类似 “image.jpg” 的无效命名。
    • 文件体积：根据图片分类（缩略图 < 50KB, 内容图 < 100KB, Banner < 200KB）判定是否过大。
    • 加载策略：确保首屏 LCP 图片使用 fetchpriority="high"，非首屏图片使用 loading="lazy"。
  3. 生成优化清单：输出包含当前状态、问题点及预计节省空间的审计汇总表。
  4. 代码重构建议：提供符合现代标准的 <picture> 渐进增强代码示例。
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述性文本" width="800" height="600" loading="lazy" decoding="async">
</picture>

下载和安装

下载 seo-images 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐